The core APIs the browser hands every frontend developer — fetching data, storing it, reading the user's location, controlling history, and validating forms. Runnable examples, plus how each one works inside React and Next.js.
These are browser APIs the platform gives you for free — comfort with JavaScript (especially async/await and the DOM) is all you need to follow along. The examples are written in TypeScript, ready to paste into a Next.js app, and each lesson shows the React/Next.js version too.
Before you start
These are browser APIs, so the examples run in the browser. To try the React and Next.js snippets, set up a Next.js app — install VS Code and Node.js, open the integrated terminal (Ctrl+`), then scaffold and run one with whichever package manager you use:
pnpm
pnpm create next-app@latest my-app
cd my-app
pnpm devnpm
npx create-next-app@latest my-app
cd my-app
npm run devDrop a snippet into a client component to see it in the running app. For the quick standalone snippets you can also paste them straight into the browser's DevTools console (F12). Some APIs need a user action or permission — the browser will prompt for it.
Fetch API
Make HTTP requests with the Fetch API in a Next.js + TypeScript app — typed GET and POST, reading JSON, checking response status, handling errors, cancelling requests, and fetching in Server and Client Components.
Storage
Store data in the browser with localStorage and sessionStorage in a Next.js + TypeScript app — saving, reading, removing, typed JSON values, the difference between them, and the hydration gotcha.
Geolocation
Get the user's location with the Geolocation API in a Next.js + TypeScript app — typed coordinates, handling permission denials and errors, tuning accuracy, watching position changes, and a typed client-component hook.
History
Understand the browser History API in a Next.js + TypeScript app — back and forward, pushState and replaceState, the typed popstate event, and why you use the next/navigation router instead of the raw API.
Form Validation
Validate forms with the Constraint Validation API in a Next.js + TypeScript app — built-in constraints in TSX, checking validity with typed elements, custom messages, reporting errors, and how it maps to react-hook-form.