Cheat sheet · Front end
Next.js cheat sheet
The App Router files, server and client components, data, links, images and settings in Next.js.
- Sections
- 6
- Items
- 27
- Area
- Front end
- Download
- PNG, PDF
Cheat sheet
Next.js
The App Router files, server and client components, data, links, images and settings in Next.js.
Special files in app/
page.tsx- The page for a route
layout.tsx- Shared frame around pages and child routes
loading.tsx- Shown while the page loads
error.tsx- Shown when something fails (a client component)
not-found.tsx- The 404 page
route.ts- An API endpoint (GET, POST ...)
Routes
app/blog/page.tsx- The address /blog
app/blog/[slug]/page.tsx- A dynamic address: /blog/anything
app/(shop)/cart/page.tsx- A folder in brackets groups files and is not in the address
generateStaticParams()- List the pages to build ahead of time
export const metadata = { title: "..." }- Page title and description
Server and client
(default)- Components run on the server: fast, can read data directly
"use client"- First line of a file that needs state, effects or browser events
"use server"- Marks a function the browser can call as a server action
process.env.SECRET- Server only
NEXT_PUBLIC_NAME- Variables with this prefix are sent to the browser
Navigation
<Link href="/about">- A fast link between pages
useRouter()- Go to a page from code (client component)
usePathname()- The current address path
useSearchParams()- The ?key=value part of the address
redirect("/login")- Send the visitor elsewhere (server)
notFound()- Show the 404 page
Images and fonts
<Image src alt width height />- A resized, lazy-loaded image
next/font- Load fonts with no layout jump
Commands
next dev- Run the site while you work
next build- Make the production version
next start- Run the production version
Remember
- Keep "use client" files small and low in the tree so most of the page stays on the server.
- Next.js changes between major versions. Check the guide for your version before you copy older code.
Learn it properly
A cheat sheet helps you remember. These lessons explain the ideas step by step, with examples.