Next.js Cheat Sheet
Next.js routing, data fetching, API routes, and deployment patterns.
2 PagesIntermediateApr 26, 2026
App Router Basics
File-based routing conventions.
text
app/page.tsx -> /app/about/page.tsx -> /aboutapp/blog/[slug]/page.tsx -> /blog/:slugapp/layout.tsx -> shared layout
Data Fetching
Fetch data in a Server Component.
tsx
export default async function Page() { const res = await fetch('https://api.example.com/data', { next: { revalidate: 60 }, // ISR every 60s }); const data = await res.json(); return <div>{data.title}</div>;}
Route Handler
Build an API endpoint.
ts
// app/api/hello/route.tsexport async function GET() { return Response.json({ message: 'Hello' });}
Special Files
Reserved file names in the app directory.
- page.tsx- Route UI
- layout.tsx- Shared UI wrapper
- loading.tsx- Loading state
- error.tsx- Error boundary
- not-found.tsx- 404 UI
Server Actions
Mutate data on the server directly from a form without an API route.
typescript
// app/actions.ts'use server'import { revalidatePath } from 'next/cache'export async function createTodo(formData: FormData) { const title = formData.get('title') as string await db.todo.create({ data: { title } }) revalidatePath('/todos')}// app/todos/page.tsximport { createTodo } from '../actions'export default function Page() { return ( <form action={createTodo}> <input name="title" /> <button type="submit">Add</button> </form> )}
Middleware
Run code before a request completes, e.g. auth redirects.
typescript
// middleware.ts (project root)import { NextResponse } from 'next/server'import type { NextRequest } from 'next/server'export function middleware(request: NextRequest) { const token = request.cookies.get('token') if (!token) { return NextResponse.redirect(new URL('/login', request.url)) } return NextResponse.next()}export const config = { matcher: ['/dashboard/:path*', '/settings/:path*'],}
Dynamic Metadata
Generate SEO metadata per route with generateMetadata.
typescript
import type { Metadata } from 'next'export async function generateMetadata( { params }: { params: { slug: string } }): Promise<Metadata> { const post = await getPost(params.slug) return { title: post.title, description: post.excerpt, openGraph: { images: [post.coverImage] }, alternates: { canonical: `/blog/${params.slug}` }, }}
Caching & Revalidation
Controls for the App Router data and route cache.
- revalidatePath(path)- purge the cached render for a route path on demand
- revalidateTag(tag)- invalidate all fetches tagged with next: { tags }
- export const revalidate = 60- ISR: re-generate the route at most every 60 seconds
- export const dynamic = 'force-dynamic'- opt a route out of static rendering entirely
- fetch(url, { cache: 'no-store' })- never cache this request; always run fresh
- fetch(url, { next: { revalidate: 3600 } })- cache the fetch result for one hour
Pro Tip
Keep Server Components as the default and only add "use client" to components that truly need interactivity or browser APIs.
Was this cheat sheet helpful?
Explore Topics
#NextJs#NextJsCheatSheet#WebDevelopment#Intermediate#AppRouterBasics#DataFetching#RouteHandler#SpecialFiles#APIs#DevOps#CheatSheet#SkillVeris
