Next.js

Next.js 16 and the App Router Checked Oct 2026 110 code snippets

The model

Next.js is React with a server, a router and a build step. A folder under app/ with a page.js file becomes a URL.
In the App Router, every component is a Server Component unless its file starts with 'use client'. Server Component code never reaches the browser.
The server sends HTML plus the RSC Payload, a compact description of the tree. The browser hydrates the Client Components, attaching event handlers, so their first render must match the HTML.
A route is static, built once by next build, until it reads request data such as cookies() or searchParams. Then it renders on every request.
The older Pages Router maps each file in pages/ to a URL and fetches data in getStaticProps or getServerSideProps. Both routers can run in one app.

One request, top to bottom. Server Components run on the server and never ship. Only Client Component code reaches the browser, where it hydrates the HTML.

App Router vs Pages Router

what Next.js adds, and its two ways to route

What Next.js adds to React

Say what Next.js adds to ReactServer rendering, routing and API routes in one project.

Start a new appnpx create-next-app@latest

Asked in interviews

AskedWhat are the main benefits of using Next.js over Create React App?

From Pages Router to App Router

Add a route in each routerapp/blog/page.jspages/blog.js

Migrate from pages to appBoth run side by side, so move one route at a time.

TrapLinks between pages and app routes do a hard navigation, a full reload that loses client state.

Asked in interviews

AskedWhat are the main differences between App Router and Pages Router?AskedHow would you migrate from the Pages Router to the App Router?

_app.js and _document.js

Share UI across all pagespages/_app.jsIts state survives navigation.

Set lang on the html tagpages/_document.jsServer only, no event handlers.

Replace both in the App Routerapp/layout.jsRenders <html> and <body>.

TrapThe <Head /> in _document.js isn't next/head. Set page titles with next/head.

Asked in interviews

AskedWhat is the purpose of the _app.js file?AskedWhat is the difference between _app.js and _document.js?

Routing & navigation

turn folders into URLs and move between them

Folders become routes

Add a dynamic segmentapp/blog/[slug]

Catch every path under /docsapp/docs/[...slug]slug is an array.

Serve a file at /logo.pngpublic/logo.png

Trap[...slug] doesn't match plain /docs. Use [[...slug]], which does, with slug undefined.

Asked in interviews

AskedExplain the file-based routing system in Next.js AskedWhat are catch-all routes and how do you implement them?AskedWhat is the public directory used for?

Params and query strings

Read params on the serverawait params

Read params and query on the clientuseParams()useSearchParams()

Read them in the Pages Routerrouter.query

Traprouter.query starts empty on a prerendered Pages Router page, so id is undefined at first.

Asked in interviews

AskedHow do you implement dynamic routing in Next.js?AskedHow do you pass data between pages in Next.js?AskedHow do you implement search functionality in Next.js?

Link, router.push and prefetch

Link to a page<Link href="/about">

Navigate from coderouter.push(url)useRouter from next/navigation.

Turn off prefetchingprefetch={false}

TrapPrefetching runs only in production, never in next dev.

Asked in interviews

AskedWhat is the difference between Link and router.push()?AskedHow does prefetching work in Next.js?

Redirects, rewrites and locales

Redirect a URLasync redirects()308 and 307 keep the method.

Rewrite a path, keep its URLasync rewrites()

Add locales in the App Routerapp/[lang]/page.jsProxy redirects to a locale.

Add locales in the Pages Routeri18n: { locales, defaultLocale }

Asked in interviews

AskedHow do you implement redirects and rewrites in Next.js?AskedHow do you implement internationalization (i18n) in Next.js?

Layouts, loading & errors

the special files that wrap each route

Layouts, templates and loading

Share UI with child pageslayout.jsKeeps state on navigation.

Reset state on every navigationtemplate.jsRemounts with a new key.

Show a loading fallbackloading.jsThe page's Suspense fallback.

TrapA layout doesn't re-render on navigation, so never rely on it alone for an auth check.

Asked in interviews

AskedWhat are layouts in App Router and how do you use them?AskedWhat is the difference between a layout and a template in the App Router?AskedHow do loading states work in App Router?

Error pages and boundaries

Catch errors in a route segmenterror.jsMust be a Client Component.

Catch errors in the root layoutglobal-error.js

Show a 404 from codenotFound()Renders not-found.js.

Add 404 and 500 pagespages/404.jspages/500.js

TrapAn error.js doesn't catch errors in the layout of its own folder.

Asked in interviews

AskedHow do you handle errors in App Router?AskedHow do you create custom error pages in Next.js?AskedHow do you implement error boundaries in Next.js?

Metadata, sitemaps and PWAs

Set the title and descriptionexport const metadatagenerateMetadata()

Serve /sitemap.xmlapp/sitemap.js

Make the app installableapp/manifest.tsPlus a service worker.

TrapMetadata exports work only in Server Components. Use generateMetadata when the title needs fetched data.

Asked in interviews

AskedHow do you add metadata for SEO in Next.js?AskedHow do you generate a sitemap in Next.js?AskedHow do you implement Progressive Web App (PWA) features in Next.js?

Server & Client Components

what runs where, and what can cross between them

Server or Client Component

await db.query()Read a database or a secret key

useStateonClickUse state, event handlers or window

useContextProvide or read React context

Heavy libraries stay on the server.Add nothing to the browser bundle

yesno

Asked in interviews

AskedWhat are Server Components and how do they work in App Router?

Client Components and hydration

Make a Client Component'use client'At the top, above the imports.

Pass props from server to clientOnly serializable ones. A function can't cross.

Find why hydration failedReading window or Date in render, or a div inside a p.

Show browser-only content after hydrationuseEffect(() => setIsClient(true), [])

Let one timestamp differsuppressHydrationWarning

TrapClient Components still render to HTML on the server. 'use client' doesn't mean browser only.

Asked in interviews

AskedHow do you create Client Components in App Router?AskedHow do you create reusable components in Next.js?AskedWhat causes hydration errors in Next.js, and how do you fix them?

Global state and saved data

Share state across pagesUse Zustand, or a Context provider in a Client Component.

Keep a theme with no flashStore it in a cookie the server can read.

Build a compound componentShare state through context, in a Client Component.

TrapA module-level store on the server is shared by all requests. Make one per request for user data.

Asked in interviews

AskedHow do you implement global state management in Next.js?AskedHow do you implement data persistence in Next.js?AskedHow do you implement compound components in Next.js?

Rendering & data fetching

when the HTML is built, and where data comes from

SSG, ISR, SSR and CSR

SSGBuild HTML once, at build time

revalidate: 60ISRRebuild static pages after deploy

SSRBuild HTML on every request

CSRBuild it in the browser

builds the HTMLdoesn't

TipSSG is fastest, but only as fresh as the last build. SSR is always fresh, but each request waits. CSR is weak for SEO.

Asked in interviews

AskedExplain the differences between SSR, SSG, and CSR in Next.js AskedWhat is Incremental Static Regeneration (ISR)?AskedHow do you implement hybrid rendering in Next.js?

Fetch data on the server

Fetch in the App Routerawait getPosts()In any async Server Component.

Fetch at build timegetStaticPropsAdd revalidate for ISR.

Fetch on every requestgetServerSidePropsGets req and params.

TrapgetStaticProps can't read the request. Cookies, auth and per-user data need getServerSideProps.

Asked in interviews

AskedWhat is getStaticProps and when should you use it?AskedWhat is getServerSideProps and when should you use it?AskedHow does data fetching differ between App Router and Pages Router?

getStaticPaths and fallback

List the paths to prerendergetStaticPathsPair it with getStaticProps.

Return 404 for unlisted pathsfallback: false

Show a fallback page firstfallback: trueCheck router.isFallback.

Render new paths on first requestfallback: 'blocking'

List the paths in the App RoutergenerateStaticParams()

TrapNeither true nor 'blocking' updates a built page. Add revalidate for fresh content.

Asked in interviews

AskedWhat is getStaticPaths and why is it needed?AskedWhat is the difference between fallback: false, fallback: true, and fallback: 'blocking'?

Fetch data on the client

Fetch after the page rendersIn useEffect, in a Client Component.

Cache and dedupe requestsuseSWR(key, fetcher)

Cancel a stale requestcontroller.abort()In the effect cleanup.

Asked in interviews

AskedHow do you fetch data on the client-side in Next.js?AskedWhat is SWR and how do you use it with Next.js?AskedHow do you implement custom hooks for data fetching in Next.js?

CMS, MDX, GraphQL and databases

Build pages from a headless CMSFetch on the server. Revalidate from its webhook.

Write pages in MDXnpm install @next/mdxAdd mdx to pageExtensions.

Reuse a database clientMake one per process. Cache it on global in dev.

Query a GraphQL APIPlain fetch on the server, Apollo on the client.

TrapRendering CMS HTML with dangerouslySetInnerHTML risks XSS. Sanitize it first.

Asked in interviews

AskedHow do you integrate a headless CMS with Next.js?AskedHow do you implement MDX in Next.js?AskedHow do you implement database connections in Next.js?

Caching & revalidation

what Next.js keeps, and how to refresh it

Cache and revalidate data

Cache a fetch for 60 seconds{ next: { revalidate: 60 } }

Refresh a page after a writerevalidatePath(path)

Mark a tag stalerevalidateTag(tag, 'max')Refreshes in the background.

Expire a tag at onceupdateTag(tag)Only inside a Server Action.

TrapSince Next.js 15, fetch results aren't cached by default. Opt in with cache: 'force-cache'.

Asked in interviews

AskedHow do you implement server-side caching in Next.js?

Cache Components and use cache

Cache a function or component'use cache'cacheLife('hours')cacheTag('posts')

Cache it before Next.js 16unstable_cache()

Serve a static shell, stream the restPartial Prerendering, part of Cache Components.

TrapCached code can't read cookies() or headers(). Read them outside and pass the values in.

Asked in interviews

AskedHow do you implement advanced caching strategies in Next.js?

API routes & Server Actions

server code that your UI or other clients call

Route Handlers and API routes

Create an endpointapp/api/users/route.js

Handle one HTTP methodexport function POST()Unexported methods get 405.

Read the body and queryawait req.json()req.nextUrl.searchParams

Create one in pages/apipages/api/users.jsCheck req.method.

TrapA route.js can't sit in the same folder as a page.js.

Asked in interviews

AskedHow do you create API routes in Next.js?AskedHow do you handle different HTTP methods in API routes?AskedHow do you access request data in API routes?

Uploads, CORS and API errors

Accept a file uploadawait req.formData()Store it in S3, not on disk.

Accept one in pages/apibodyParser: falseThen parse with formidable.

Allow another origin with CORSSet Access-Control-Allow-* and answer OPTIONS.

Return an API errorThe right status and a JSON body, never a stack trace.

Trapfetch doesn't reject on a 404 or 500. The client must check response.ok.

Asked in interviews

AskedHow do you handle file uploads in API routes?AskedHow do you implement CORS in Next.js API routes?AskedHow do you handle API errors in Next.js?

Server Actions

Write a Server Action'use server'

Call it from a form<form action={save}>Works before JavaScript loads.

Pick an action or a Route HandlerActions for your forms, Route Handlers for webhooks.

TrapAnyone can call an action with a direct POST. Check auth and validate input inside it.

Asked in interviews

AskedHow do you implement Server Actions in Next.js App Router?AskedWhat is the difference between a Route Handler and a Server Action?

Jobs, WebSockets and servers

Run code after the responseafter(() => log())

Add WebSocketsRun Socket.IO on a custom server, which Vercel can't host.

Start Next.js from your own serverapp.getRequestHandler()It can't use standalone output.

Split a domain into zonesbasePath: '/blog'

TrapNever start a queue worker in a module your routes import. It would start in every web instance.

Asked in interviews

AskedHow do you implement background jobs in Next.js?

Proxy, auth & security

guard requests, sessions and secrets

Proxy, formerly middleware

Run code before requestsproxy.jsWas middleware.js before 16.

Limit the paths it runs onmatcher: '/admin/:path*'

Redirect the requestNextResponse.redirect(url)

Run an A/B testHash a user-id cookie, then rewrite group B to its page.

Choose Edge or Node.jsUse Node.js. Edge has no filesystem and no ISR.

TrapWithout a matcher, Proxy runs on every request, static files and images included.

Asked in interviews

AskedWhat is middleware in Next.js and how do you use it?AskedWhat is the Edge Runtime in Next.js, and should you still use it?

Protect pages and APIs

Guard a pageredirect('/login')Check the session first.

Guard an API routeVerify the token. 401 if invalid, 403 if forbidden.

Add NextAuth.js sign-in[...nextauth].jsThen call useSession().

TrapNever rely on Proxy alone. Check the session again where the data is read.

Asked in interviews

AskedHow do you protect pages with authentication?AskedHow do you implement authentication in API routes?AskedHow do you implement authentication with NextAuth.js?

Security checklist

Keep a module server-onlyimport 'server-only'

Set security headersasync headers()A CSP and X-Frame-Options.

Rate limit a login routeCount per client in Redis. Reply 429 with Retry-After.

Asked in interviews

AskedWhat security considerations should you keep in mind with Next.js?AskedHow do you implement rate limiting in Next.js?

Styling & performance

CSS, images, fonts, bundles and Web Vitals

Global CSS and CSS Modules

Add global CSSimport './globals.css'In the root layout.

Add it in the Pages Routerpages/_app.jsThe only file allowed to import it.

Scope CSS to a componentButton.module.cssUse it as styles.primary.

TrapNext.js doesn't remove global CSS as you navigate, so rules from two pages can clash.

Asked in interviews

AskedHow do you add global CSS in Next.js?AskedWhat are CSS Modules and how do you use them in Next.js?AskedWhat styling options are available in Next.js?

Tailwind, Sass and styled-jsx

Add Tailwind CSSnpm install -D tailwindcss @tailwindcss/postcss

Add Sassnpm install sass.module.scss files are scoped.

Put scoped CSS in the JSX<style jsx>Ships with Next.js.

TipThe docs recommend Tailwind. It builds plain CSS, so Server Components can use it.

Asked in interviews

AskedHow do you integrate Tailwind CSS with Next.js?AskedHow do you use Sass/SCSS in Next.js?AskedHow do you implement styled-jsx in Next.js?

Images and fonts

Serve an optimized image<Image src={hero} alt="Hero" />

Load the hero image firstpreloadWas priority before 16.

Self-host a fontnext/font/googlenext/font/local

TrapNext.js 16 allows only quality={75} unless you list more in images.qualities.

Asked in interviews

AskedHow do you optimize images in Next.js?AskedHow do you optimize fonts in Next.js?

Lazy loading and Web Vitals

Split code by routeNext.js does it for you.

Lazy load a componentdynamic(() => import('./Chart'))

Skip server rendering{ ssr: false }Client Components only.

Improve LCP, INP and CLSPreload the hero image, ship less JavaScript, reserve space.

Report vitals from real usersuseReportWebVitals

TrapINP replaced FID as a Core Web Vital. Report INP, since web-vitals removed onFID.

Asked in interviews

AskedHow does automatic code splitting work in Next.js?AskedHow do you implement lazy loading in Next.js?AskedHow do you optimize Core Web Vitals in Next.js?

Bundle size and long lists

Run @next/bundle-analyzerANALYZE=true npm run build -- --webpack

Import less from big librariesoptimizePackageImportsPlus named ES module imports.

Render 10,000 rowsreact-windowRenders only visible rows.

Load more on scrollIntersectionObserver

Asked in interviews

AskedHow do you analyze and optimize your Next.js bundle?AskedHow do you implement tree shaking in Next.js?

Build, test & deploy

config, environment, types, tests and hosting

next.config.js and environment variables

Configure Next.jsnext.config.jsAlso .mjs or .ts.

Expose a variable to the browserNEXT_PUBLIC_API_URLOthers stay server-only.

TrapNext.js inlines NEXT_PUBLIC_ values at build time. Never put a secret in one.

Asked in interviews

AskedHow do you configure environment variables in Next.js?AskedWhat is the purpose of next.config.js?

Build and deploy

Build and serve for productionnext buildnext start

Make a small Docker imageoutput: 'standalone'

Deploy with the Vercel CLIvercel --prod

Tipnext build prerenders every route it can, and fails on type errors.

Asked in interviews

AskedHow do you build a Next.js application for production?AskedHow do you deploy a Next.js application to Vercel?

TypeScript

Add TypeScriptRename a file to .tsx, then run next dev.

Type a pages/api handlerNextApiResponse<User[]>

Type a Route Handler's paramsRouteContext<'/users/[id]'>

Trapreq.body is typed any. Validate it at runtime, for example with Zod.

Asked in interviews

AskedHow do you set up TypeScript in Next.js?AskedHow do you type API routes in TypeScript?

Test pages and API routes

Set up Jestrequire('next/jest')It mocks CSS, images and fonts.

Test a Route Handlerawait GET(new Request(url))

Test a pages/api handlercreateMocks({ method: 'GET' })

Asked in interviews

AskedHow do you set up testing in Next.js?AskedHow do you test API routes in Next.js?

Turbopack, webpack and Babel

Build with webpacknext build --webpackNeeded for custom webpack.

Change the webpack configwebpack: (config) => config

Strip console.log with SWCcompiler: { removeConsole: true }

TrapA Babel config switches every file from SWC to Babel, which is about 17 times slower.

Asked in interviews

AskedHow do you customize the webpack configuration in Next.js?

Pro · $10/mo

This sheet stays free. With Pro, you can:

Every answer on this sheet. Read the full answer to all 95 questions it links, not just the 14 free ones.
My sheet. The cards you star and the ones you miss in Quiz me, from every sheet, on one page to quiz and print.
PDFs. Download this sheet and My sheet, laid out for A4, with every question a link to its answer.
The rest of Pro. Every answer in the question library, and 1,000 AI credits a month.

Get Pro or browse more free sheets

The model

App Router vs Pages Router

What Next.js adds to React

From Pages Router to App Router

_app.js and _document.js

Routing & navigation

Folders become routes

Params and query strings

Link, router.push and prefetch

Redirects, rewrites and locales

Layouts, loading & errors

Layouts, templates and loading

Error pages and boundaries

Metadata, sitemaps and PWAs

Server & Client Components

Server or Client Component

Client Components and hydration

Global state and saved data

Rendering & data fetching

SSG, ISR, SSR and CSR

Fetch data on the server

getStaticPaths and fallback

Fetch data on the client

CMS, MDX, GraphQL and databases

Caching & revalidation

Cache and revalidate data

Cache Components and use cache

API routes & Server Actions

Route Handlers and API routes

Uploads, CORS and API errors

Server Actions

Jobs, WebSockets and servers

Proxy, auth & security

Proxy, formerly middleware

Protect pages and APIs

Security checklist

Styling & performance

Global CSS and CSS Modules

Tailwind, Sass and styled-jsx

Images and fonts

Lazy loading and Web Vitals

Bundle size and long lists

Build, test & deploy

next.config.js and environment variables

Build and deploy

TypeScript

Test pages and API routes

Turbopack, webpack and Babel

Frontend Development

Angular

CSS3

GraphQL

HTML5

This sheet stays free. With Pro, you can: