liminfoNext.js Reference
Free reference guide: Next.js Reference
About Next.js Reference
The Next.js Reference covers the full App Router architecture introduced in Next.js 13 and refined in Next.js 14+. It includes routing patterns such as dynamic routes with [slug], catch-all routes with [...slug], route groups using parentheses, and the special files layout.tsx, page.tsx, loading.tsx, error.tsx, and not-found.tsx. Developers can quickly look up how the file-system router maps directories to URL paths without needing to leave their editor.
Data fetching patterns are a core focus of this reference. It documents Server Component fetch() with cache and revalidate options, on-demand revalidation with revalidatePath() and revalidateTag(), Suspense-based streaming with loading.tsx, and the difference between static and dynamic rendering triggered by cache: "no-store". Route Handlers (app/api/route.ts) and Server Actions ("use server") are covered with complete GET/POST examples showing NextResponse.json() and FormData handling.
The reference is organized into six categories — Routing, Data Fetching, API, Middleware, Rendering, and Config — making it easy to scan for the exact directive needed. It is used daily by full-stack TypeScript developers building production applications, by developers migrating from the Pages Router, and by bootcamp students learning modern React. All entries include copy-ready TypeScript code snippets covering next/image optimization, next/link navigation, useRouter from next/navigation, generateStaticParams for SSG, generateMetadata for dynamic SEO, and next.config.js configuration.
Key Features
- App Router file conventions — layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx
- Dynamic routes ([slug]), catch-all ([...slug]), and route groups with parentheses
- Server Component fetch() with cache / revalidate / next.tags options
- On-demand revalidation via revalidatePath() and revalidateTag()
- Route Handlers (GET, POST) and Server Actions with FormData examples
- Middleware with NextRequest, cookie auth, and matcher config patterns
- generateStaticParams for SSG and generateMetadata for dynamic Open Graph
- next/image optimization, next/link navigation, and next.config.js redirects
Frequently Asked Questions
What is the difference between Server Components and Client Components in Next.js?
Server Components run only on the server and can directly access databases or file systems without sending JavaScript to the browser. They are the default in the App Router. Client Components are marked with "use client" at the top of the file and can use React hooks like useState and useEffect. You should reach for Client Components only when you need browser interactivity or browser APIs.
How does Next.js App Router caching work?
Next.js 14 caches fetch() responses by default (force-cache). You can opt out with { cache: "no-store" } for fully dynamic rendering, or use { next: { revalidate: N } } for Incremental Static Regeneration that refreshes after N seconds. For granular on-demand cache purging, tag fetches with { next: { tags: ["posts"] } } and call revalidateTag("posts") inside a Server Action.
What are Server Actions and when should I use them?
Server Actions are async functions marked with "use server" that run on the server when called from a form action or client event. They replace separate API route files for form submissions, database mutations, and cache invalidation. They colocate the mutation logic with the UI and automatically handle CSRF protection. Use them whenever you need to write to a database or call a server-only API from a form.
How do I implement authentication with Next.js middleware?
Create a middleware.ts file at the project root that exports a middleware function receiving a NextRequest. Check for a session cookie or JWT header, then return NextResponse.redirect() to a login page if the token is missing or invalid. Use the config.matcher array to restrict which paths the middleware runs on, such as ["/dashboard/:path*"] to protect only the dashboard routes.
What is the difference between layout.tsx and template.tsx?
layout.tsx persists its state and DOM across navigations within its segment — child components do not remount. template.tsx creates a new instance for each child route, causing a full remount on navigation. Use layout.tsx for persistent UI like sidebars and navbars. Use template.tsx when you specifically need to reset component state or trigger enter animations on every route change.
How does generateStaticParams work?
generateStaticParams is an async function exported from a dynamic route page that returns an array of param objects. Next.js uses these to pre-render all matching paths at build time as static HTML. For example, in app/blog/[slug]/page.tsx you return [{ slug: "post-1" }, { slug: "post-2" }] to build each post statically. Paths not returned fall back to dynamic rendering at request time.
How do I add custom Open Graph metadata in the App Router?
Export a metadata object from any page.tsx or layout.tsx for static metadata, or export a generateMetadata async function to compute metadata dynamically from route params and fetched data. Include an openGraph field with title, description, and images array. Next.js automatically injects the resulting meta tags into the HTML head without requiring a separate react-helmet or next/head import.
What does the parallel routes feature do?
Parallel routes allow you to render multiple pages in the same layout simultaneously using named slots defined as @folder directories. Each slot receives its own loading and error boundaries. This is useful for dashboards where a sidebar and a main content area need independent loading states and can be navigated independently without affecting each other.