Step-by-step articles on Next.js, part of our Frontend collection.
Showing 10 articles
In the App Router, folders define routes and special files define what renders for them. Once you know the handful of file conventions, the structure of any Next.js app becomes easy to read. Folders are routes app/ layout.tsx -> wraps every page (html, body, h...
A Server Action is an async function that runs on the server but can be called from a form or a client component. Next.js creates the endpoint for you. A form that writes to the database // app/todos/page.tsx import { revalidatePath } from 'next/cache'; import...
Caching in Next.js used to be implicit and confusing. Recent versions moved to an explicit model: data is fetched fresh by default, and you opt in to caching with the 'use cache' directive. Turn on Cache Components // next.config.ts import type { NextConfig }...
In the App Router you fetch data directly in async Server Components. No useEffect , no API route in between. The main thing to get right is avoiding slow request waterfalls . Fetch where the data is needed export default async function Dashboard() { const sta...
Dynamic routes let one file serve many URLs, such as every blog post or product. With generateStaticParams you can pre-render the popular ones at build time. Segment types [slug] - one segment: /blog/hello . [...slug] - catch-all: /docs/a/b/c gives ['a','b','c...
Sometimes you need to act on a request before any page renders: redirect signed-out users, rewrite a path, or add a header. In Next.js 16 this file is called proxy.ts ; earlier versions called it middleware.ts and the idea is the same. A basic proxy // proxy.t...
The App Router has built-in tools for everything search engines and social networks need: titles, descriptions, canonical links, sitemaps and share images. Static metadata // app/layout.tsx import type { Metadata } from 'next'; export const metadata: Metadata...
Route Handlers are the App Router's version of API routes. A route.ts file exports functions named after HTTP methods and uses the standard Web Request and Response APIs. GET and POST // app/api/projects/route.ts import { NextResponse } from 'next/server'; exp...
The App Router turns error handling into file conventions. Each route segment can have its own error UI, so one broken widget doesn't take down the whole app. error.tsx: catch unexpected errors // app/dashboard/error.tsx 'use client'; // error boundaries must...
Images and fonts are the most common causes of slow Largest Contentful Paint (LCP) and layout shift (CLS). Next.js includes components that fix both with very little effort. next/image import Image from 'next/image'; import hero from './hero.jpg'; // static im...
