Next.js 16+ interview questions and answers

In the App Router every component is a Server Component by default: it renders on the server, can be async, reads data directly (database, file system, secrets), and sends no JavaScript to the browser. Components that need state, effects or browser APIs opt in with "use client". Server Components can render Client Components and pass them serialisable props, which keeps bundles small.

Turbopack is the default bundler for dev and build. Cache Components make caching explicit with the "use cache" directive, cacheLife and cacheTag, alongside Partial Prerendering. middleware.ts is renamed proxy.ts. New cache APIs updateTag() and refresh() join revalidateTag(), which now takes a cache-life profile. React Compiler support is stable, routing got layout deduplication and incremental prefetching, and it ships with React 19.2.

With cacheComponents enabled, data fetching is dynamic by default and nothing is cached unless you say so. Mark a function, component or whole route with "use cache" to cache its output; set how long with cacheLife('hours') and label it with cacheTag('products'). Dynamic parts wrapped in <Suspense> stream in, while cached parts are part of the prerendered shell (Partial Prerendering).

Async functions marked "use server" that run on the server and can be called from forms (<form action={createPost}>) or client code. They handle mutations without writing API routes, and work with useActionState and progressive enhancement. Treat them like public endpoints: validate input (for example with Zod), check authentication and authorisation inside each action, and revalidate or update caches afterwards.

Make the component async and await the data directly (fetch, an ORM, an SDK), so no client-side waterfall or API route is needed. Start independent requests in parallel with Promise.all, wrap slow parts in <Suspense> to stream them, and mark reusable cached functions with 'use cache'.

When the UI uses state, effects, event handlers, refs, browser APIs or client-only libraries. Mark the module with 'use client' and keep it as small as possible, at the leaves of the tree, passing Server Components to it as children when needed.

Check the session close to the data: in Server Components, Route Handlers and every Server Action, using a data access layer that verifies the user. proxy.ts can do optimistic redirects, but never rely on it alone. Store sessions in secure httpOnly cookies.

Fetch in Server Components near the root of a segment, start independent requests together, preload data with functions called before awaiting, pass promises down to children that use() them, and stream slower parts with Suspense rather than chaining sequential awaits.

Folders in app/ define URL segments; page.tsx makes a segment routable. layout.tsx wraps pages and persists across navigation, loading.tsx adds a Suspense fallback, error.tsx an error boundary, not-found.tsx a 404. Dynamic segments use [id], catch-all [...slug], route groups (group) organise without changing URLs, and parallel (@slot) and intercepting routes handle modals and dashboards.

In Next.js 16 proxy.ts (formerly middleware) runs before a request is handled, on the Node.js runtime. Use it for redirects, rewrites, setting headers or cookies, and light checks such as redirecting signed-out users. Keep it fast and do not rely on it alone for authorisation; check access again where the data is read.

revalidateTag(tag, 'max') marks tagged cache entries stale with stale-while-revalidate behaviour, good for content that can be slightly behind (calling it without a profile is deprecated). updateTag(tag) (Server Actions only) expires the entry and reads fresh data in the same request, giving read-your-writes after a mutation. refresh(), callable only inside a Server Action, refreshes the client router so the page re-renders with fresh uncached data, without touching cached entries.

They are Promises: in pages, layouts and route handlers you await params (or use React's use() in a client component). The same applies to cookies(), headers() and draftMode(). This lets Next.js know which parts are dynamic and prerender the rest.

next/image resizes, serves modern formats such as WebP/AVIF, lazy-loads and reserves space to prevent layout shift; remote hosts are allowed with images.remotePatterns. next/font downloads Google or local fonts at build time and self-hosts them, with no external request and automatic fallback metrics.

The server sends the page shell immediately and streams slower parts as they resolve, each wrapped in <Suspense> (or using loading.tsx). Users see content sooner, and a slow query no longer blocks the whole page.

Parallel routes render several pages in one layout through named slots (@modal, @feed), each with its own loading and error states. Intercepting routes ((.)photo/[id]) show a route inside the current layout, such as a modal, while a direct visit renders the full page.

error.tsx is a Client Component error boundary for a segment. It receives the error and a retry() function (stable since 16.3) that re-fetches and re-renders the segment; reset() still exists for clearing the error without re-fetching. not-found.tsx renders when notFound() is called or a route does not match. global-error.tsx catches errors in the root layout.

Treat every action as a public endpoint: parse FormData or arguments with a schema (Zod), check authentication and authorisation, return structured errors for useActionState, and never trust hidden fields or IDs from the client.

Keep heavy code in Server Components, lazy-load client-only widgets with next/dynamic, import only what you use from large libraries, analyse bundles, avoid putting providers that pull big dependencies in the root layout, and use next/font and next/image.

A layout.tsx wraps a segment and keeps its state across navigations between child pages. A template.tsx is similar but remounts on each navigation, useful for enter animations or resetting state.

Links in the viewport prefetch the route's static parts (and in production the loading state for dynamic routes), so navigation feels instant. Client-side navigation keeps shared layouts mounted and only renders the changed segments.

Files named route.ts that export HTTP method functions (GET, POST, …) using the Web Request and Response APIs. Use them for webhooks, public APIs or anything called by non-React clients; for your own forms, Server Actions are usually simpler.

Export a metadata object or a generateMetadata function from a layout or page for titles, descriptions, Open Graph and robots. Add sitemap.ts, robots.ts and opengraph-image.tsx files for generated assets, and render meaningful HTML on the server.

Content that does not depend on the request is prerendered at build time. Anything reading request data (cookies, headers, searchParams) or uncached data renders per request. With Partial Prerendering, one route mixes both: a static shell served instantly, with dynamic holes streamed in through Suspense.

Variables in .env files are available on the server. Only those prefixed with NEXT_PUBLIC_ are inlined into client bundles at build time, so never prefix secrets. Changing a public variable requires a rebuild.

It returns the list of dynamic params to prerender at build time for routes like /blog/[slug]. Other params can be rendered on demand and cached, depending on configuration.

Use a [lang] segment, detect the preferred locale in proxy.ts and redirect, load dictionaries in Server Components, and set generateStaticParams for supported locales and alternates in metadata.

after() schedules work (logging, analytics, cache warming) to run after the response is sent, so it does not delay the user. It works in Server Components, Server Actions, Route Handlers and proxy.

Create route.ts files exporting functions named after HTTP methods (GET, POST) that take a Request and return a Response. Validate input, check auth, and use them for webhooks or external clients; for your own UI, Server Actions are often simpler.

Run next build and next start on any Node.js server, or use output: 'standalone' for a small Docker image. Configure a shared cache handler if you run several instances, serve static assets through a CDN, and set up image optimisation (sharp is used automatically).

Use the bundle analyzer, React DevTools Profiler, the Next.js dev overlay and server logs, measure Core Web Vitals with useReportWebVitals or real-user monitoring, and check which routes are static or dynamic in the build output.

1. AWeb Components
2. BClient Components
3. CServer ComponentsCorrect answer
4. DStatic HTML only

Why: You opt into the client with "use client".

1. Aedge.ts
2. Bproxy.tsCorrect answer
3. Cserver.ts
4. Dhandler.ts

Why: Middleware was renamed proxy in Next.js 16.

1. A"use static"
2. B"use memo"
3. C"use server"
4. D"use cache"Correct answer

Why: "use cache" marks output to be cached, tuned with cacheLife and cacheTag.

1. ARollup
2. BParcel
3. CWebpack
4. DTurbopackCorrect answer

Why: Turbopack is the default for both next dev and next build.

1. A'use strict'
2. B'use client'Correct answer
3. C'use server'
4. D'use cache'

Why: It marks the client boundary.

1. AnotFound()Correct answer
2. Bredirect('/404')
3. Cthrow 404
4. Dres.status(404)

Why: It renders not-found.tsx.

1. AAll of them
2. BNone
3. CThose in .env.local only
4. DThose prefixed NEXT_PUBLIC_Correct answer

Why: They are inlined at build time.

1. Apage.tsx
2. Blayout.tsxCorrect answer
3. Ctemplate.tsx
4. Droute.ts

Why: Layouts keep their state between navigations; templates remount.

1. AuseParams() on the server
2. Bprocess.env.params
3. Cprops.params.id directly
4. Dconst { id } = await paramsCorrect answer

Why: params is a Promise and must be awaited.

1. Arouter.push()
2. BcacheLife()
3. CrevalidatePath only
4. DupdateTag()Correct answer

Why: updateTag expires and refreshes the tagged data within the same request.

1. Aerror.tsx
2. Bloading.tsxCorrect answer
3. Cnot-found.tsx
4. Ddefault.tsx

Why: loading.tsx wraps the segment in Suspense.

1. AOnly in proxy.ts
2. BInside each actionCorrect answer
3. CIn the button component
4. DNowhere; they are private

Why: Actions are reachable endpoints, so they must check access themselves.

1. Aerror.tsx in app/
2. B500.tsx
3. C_error.tsx
4. Dglobal-error.tsxCorrect answer

Why: It replaces the root layout when active.

1. AA route group
2. BAn API route
3. CA parallel route slotCorrect answer
4. DA private folder

Why: Slots render in the parent layout.

1. Atemplate.tsxCorrect answer
2. Blayout.tsx
3. Cpage.tsx
4. Ddefault.tsx

Why: Layouts persist; templates remount.

1. AgenerateStaticParamsCorrect answer
2. BgetStaticPaths
3. Cprerender()
4. DbuildParams

Why: It returns the params to build.

1. AsetTimeout in a page
2. BwaitUntil only
3. Cafter()Correct answer
4. Ddefer()

Why: Good for logging and analytics.

1. AIn parallel with Promise.allCorrect answer
2. BOne after another
3. CIn useEffect
4. DIn a Route Handler only

Why: This avoids waterfalls.

1. AMakes routes private
2. BAdds /marketing to the URL
3. CGroups routes without affecting the URLCorrect answer
4. DCreates a parallel route

Why: Parentheses mark a route group.

1. A<picture> only
2. Bnext/media
3. C<img>
4. Dnext/image's ImageCorrect answer

Why: It resizes, converts formats and lazy-loads.

1. AExactly one segment
2. BOne or more segmentsCorrect answer
3. COnly the root
4. DQuery strings

Why: A catch-all segment captures the rest of the path as an array.

1. AcacheTag()
2. BcacheLife()Correct answer
3. Cunstable_noStore()
4. DsetTimeout()

Why: cacheLife takes a profile such as 'minutes', 'hours' or 'days'.

1. ACatches all routes
2. BIntercepts the route at the same levelCorrect answer
3. CCreates a private folder
4. DGroups routes

Why: Used for modals over the current page.

1. AgetServerSideProps
2. BA config object only
3. CFunctions named after HTTP methodsCorrect answer
4. DA default React component

Why: GET, POST and so on.

1. Ause cache
2. Bnext/script
3. Cnext/dynamicCorrect answer
4. DReact.memo

Why: It splits the code into a chunk.

1. ABlock rendering
2. BPrefetch the routeCorrect answer
3. CNothing
4. DReload the page

Why: Navigation feels instant.

1. Aerror.tsx
2. Bdefault.tsxCorrect answer
3. Cloading.tsx
4. Dpage.tsx

Why: Parallel routes need a fallback.

1. Atarget: 'docker'
2. Bmode: 'server'
3. Coutput: 'export'
4. Doutput: 'standalone'Correct answer

Why: Standalone output copies only the files needed to run.

1. AuseMetrics
2. BuseReportWebVitalsCorrect answer
3. CuseVitals
4. DusePerformance

Why: Send them to analytics.

1. ASecure httpOnly cookiesCorrect answer
2. BlocalStorage
3. CURL query
4. DA global variable

Why: JavaScript cannot read them.