How to use the Next.js Cheat Sheet
- 1. Search or browseType a word like the function or task you need, or pick a section.
- 2. CopyEach snippet has its own Copy button, so you can paste it straight into your editor.
- 3. DownloadSave the whole Next.js cheat sheet as plain text or Markdown for offline revision.
What's in it
It focuses on the App Router in Next.js 14 and 15, which most new projects use. The 32 snippets are organised into 9 sections: Setup, Routing, Special files, Components, Data, Server Actions, Navigation, Metadata, Config.
Example
Search "params" to see that in Next.js 15 a page's params arrive as a Promise you await. Search "revalidate" for the three ways to control freshness: per fetch with next: { revalidate: 60 }, per segment with export const revalidate, and on demand with revalidatePath after a Server Action changes data.
Tips for using it
- Keep "use client" components small and push data fetching into Server Components.
- Check the version: some behaviour, like params being a Promise, changed in Next.js 15.
A quick look, one snippet per section
- Setup:
npx create-next-app@latest my-app(create a project (asks about TypeScript, Tailwind, App Router)) - Routing:
app/page.tsx → /(home page) - Special files:
layout.tsx(shared UI that persists across navigation) - Components:
Server Component by default(can be async and fetch data directly) - Data:
const res = await fetch(url, { next: { revalidate: 60 } });(cache and revalidate every 60 s) - Server Actions:
async function save(formData: FormData) { "use server"; … }(server Action) - Navigation:
const router = useRouter(); router.push("/done");(navigate in a Client Component (next/navigation)) - Metadata:
export const metadata = { title: "About", description: "…" };(static SEO metadata) - Config:
NEXT_PUBLIC_API_URL(env vars visible in the browser need this prefix)
Search the box above for the rest of the Next.js snippets, or download the full sheet.
Frequently asked questions
Is the Pages Router covered?
No. The sheet covers the App Router.
Which version?
Next.js 14 and 15, with version notes where they differ.
Is the Next.js cheat sheet free?
Yes. You can search, read and copy every snippet in the Next.js cheat sheet without signing up. The first time you download it, we ask once for your name and WhatsApp number; after that downloads and every other Uncodemy tool open straight away.