Back to Cheatsheets
Next.js

App Router

File-based routing in Next.js 15

File Conventions

6 items
CommandDescription
page.tsx
Route page component
layout.tsx
Shared layout (wraps children)
loading.tsx
Loading UI (Suspense)
error.tsx
Error boundary
not-found.tsx
404 page
route.ts
API route handler

Dynamic Routes

4 items
CommandDescription
[id]/page.tsx
Dynamic segment
[...slug]/page.tsx
Catch-all segment
[[...slug]]/page.tsx
Optional catch-all
(group)/page.tsx
Route group (no URL impact)

Navigation

6 items
CommandDescription
<Link href="/path">
Client-side navigation
useRouter()
Programmatic navigation
router.push("/path")
Navigate to route
router.replace("/path")
Replace current route
router.back()
Go back
redirect("/path")
Server-side redirect

Params & Search

4 items
CommandDescription
params.id
Access dynamic param (server)
useParams()
Access params (client)
searchParams.get("q")
Query params (server)
useSearchParams()
Query params (client)