Next.js Cheat Sheet

This page is a quick-reference cheat sheet for modern Next.js (App Router first). Use it when you know the concept but need the exact filename, directive, or API.

How to Use This Cheat Sheet

Tables below group the highest-frequency App Router conventions: special files, component directives, data fetching options, navigation helpers, and CLI commands. Prefer this page for lookups; return to individual lessons when you need full explanation.

Pages Router notes appear only where they prevent common mixups (next/router vs next/navigation, getServerSideProps vs async Server Components).

app/
  layout.tsx
  page.tsx
  loading.tsx
  error.tsx
  not-found.tsx
  route.ts
  sitemap.ts
  robots.ts

These reserved filenames are the backbone of App Router conventions — exact spelling matters.

Directives and Component Types

"use client"   // Client Component module boundary
"use server"   // Server Action / server-only module

// Server Component (default in app/)
export default async function Page() { /* await ok */ }

// Client Component
"use client";
export default function Widget() { /* hooks ok */ }

"use client" must be the first statement in the file.
"use server" marks Server Actions (file-level or function-level).
Server Components may be async; Client Components may not.
Pass serializable props from Server → Client (Server Actions are the special callable exception).

Special Files Reference

App Router reserved files and what they do.

File	Purpose
`page.tsx`	Public UI for a route
`layout.tsx`	Persistent shared UI / root document
`template.tsx`	Like layout but remounts on navigation
`loading.tsx`	Suspense fallback for the segment
`error.tsx`	Client error boundary for the segment
`not-found.tsx`	UI for `notFound()` / unmatched routes
`route.ts`	HTTP Route Handler
`default.tsx`	Parallel route soft-navigation fallback
`middleware.ts`	Edge request interceptor at project root

Fetch & Segment Config Reference

Caching and rendering knobs you will configure constantly.

API / Export	Effect
`fetch(url, { cache: "no-store" })`	Always fresh
`fetch(url, { next: { revalidate: N } })`	ISR-style revalidation
`fetch(url, { next: { tags: [...] } })`	Tag for on-demand revalidation
`export const dynamic = "force-dynamic"`	Always SSR this route
`export const revalidate = N`	Route-level ISR window
`revalidatePath` / `revalidateTag`	On-demand invalidation

Navigation & Metadata Reference

Helpers and metadata exports for everyday App Router work.

API	Use
`next/link` `<Link>`	Declarative client navigations
`useRouter` from `next/navigation`	Programmatic client navigations
`redirect` / `notFound`	Server-side control flow
`export const metadata`	Static SEO tags
`generateMetadata`	Dynamic SEO tags
`sitemap.ts` / `robots.ts`	Discovery & crawl rules

CLI Reference

Commands used across the course.

npx create-next-app@latest
npm run dev
npm run build
npm run start
ANALYZE=true npm run build   # with @next/bundle-analyzer

Common Mistakes

Using this sheet as a substitute for understanding — cheat sheets speed recall, they don't replace architecture judgment.
Mixing Pages Router and App Router APIs from memory without checking the import path.
Forgetting that special filenames are case-sensitive on most hosts.

Key Takeaways

Special files and directives are the App Router's core vocabulary.
Caching options and segment config determine static vs dynamic behavior.
Navigation and metadata helpers have App Router-specific import paths.
Keep this page bookmarked for syntax; open focused lessons for deeper "why".
Exact filenames and import packages matter more in Next.js than in many frameworks.

Pro Tip

Print or pin the special-files table near your editor for a week — once the reserved names become muscle memory, App Router navigation and API choices feel much less mysterious.