Next.js Cheat Sheet
Quick reference for Next.js 14+ with App Router. File conventions, routing, data fetching, server components, API routes, and deployment — all in one page.
File Conventions (App Router)
Routing
Data Fetching
Server Actions & Forms
Metadata & SEO
Common Imports
Deployment & Config
File Conventions (App Router)
| page.tsx | Route UI — renders at the segment URL |
| layout.tsx | Shared layout wrapping child routes (persists across navigation) |
| loading.tsx | Loading UI (React Suspense boundary) |
| error.tsx | Error UI (React Error Boundary) |
| not-found.tsx | Custom 404 page for the segment |
| route.ts | API endpoint (GET, POST, PUT, DELETE handlers) |
| template.tsx | Like layout but re-mounts on navigation |
| default.tsx | Fallback for parallel routes |
| middleware.ts | Runs before every request (at project root) |
Routing
| app/about/page.tsx | Static route → /about |
| app/blog/[slug]/page.tsx | Dynamic route → /blog/:slug |
| app/shop/[...slug]/page.tsx | Catch-all route → /shop/a/b/c |
| app/shop/[[...slug]]/page.tsx | Optional catch-all → /shop or /shop/a/b |
| app/(marketing)/page.tsx | Route group (no URL segment) |
| app/@modal/page.tsx | Parallel route (named slot) |
| app/api/users/route.ts | API route → /api/users |
| redirect("/path") | Server-side redirect |
| useRouter() | Client-side navigation (from next/navigation) |
| Prefetching link component |
Data Fetching
| async function Page() | Server Components fetch data directly (no useEffect) |
| fetch(url, { cache: "force-cache" }) | Static data (cached, default in production) |
| fetch(url, { cache: "no-store" }) | Dynamic data (fresh every request) |
| fetch(url, { next: { revalidate: 60 } }) | ISR — revalidate every 60 seconds |
| generateStaticParams() | Define static paths for dynamic routes (like getStaticPaths) |
| cookies() / headers() | Read request data in Server Components |
| "use client" | Mark component as Client Component (enables hooks, events) |
| "use server" | Mark function as Server Action (form handling, mutations) |
Server Actions & Forms
| "use server" in function | Create a server action |
| Call server action on form submit | |
| useFormStatus() | Get pending state inside form (client component) |
| useFormState(action, init) | Handle form state with server action |
| revalidatePath("/path") | Revalidate cached data for a path |
| revalidateTag("tag") | Revalidate cached data by tag |
Metadata & SEO
| export const metadata = { title, description } | Static metadata per page |
| export async function generateMetadata() | Dynamic metadata (async, uses params) |
| opengraph-image.tsx | Auto-generate OG images |
| sitemap.ts | Generate sitemap.xml dynamically |
| robots.ts | Generate robots.txt dynamically |
| icon.tsx / apple-icon.tsx | Generate favicons dynamically |
Common Imports
| import Image from "next/image" | Optimized image component |
| import Link from "next/link" | Client-side navigation link |
| import { redirect } from "next/navigation" | Server-side redirect |
| import { useRouter } from "next/navigation" | Client router hook |
| import { useSearchParams } from "next/navigation" | Read URL search params |
| import { usePathname } from "next/navigation" | Get current pathname |
| import { NextRequest, NextResponse } from "next/server" | Middleware/Route types |
Deployment & Config
| next.config.js / next.config.mjs | Project configuration file |
| output: "standalone" | Minimal output for Docker deployments |
| output: "export" | Static HTML export (no server needed) |
| images: { remotePatterns: [...] } | Allow external image domains |
| npx next build | Production build |
| npx next start | Start production server |
| npx next dev --turbo | Dev server with Turbopack (fast) |
Step-by-Step Guide
Read Guide →