` instead.","sources":[{"title":"Next.js: error.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/error"},{"title":"Next.js: Error Handling","url":"https://nextjs.org/docs/app/getting-started/error-handling"}],"origin":{"topic":"nextjs","level":"middle","index":22}},{"question":"What does `export const dynamic = 'force-dynamic'` do (without Cache Components)?","options":["Forces the route to render on every request, disabling prerendering","Enables hot module reloading in the production build too","Makes all of the route's components client components, like `'use client'`"],"answer":0,"explanation":"It's a route segment config option from the previous caching model. With Cache Components, explicit tools are used instead: `'use cache'` for caching, `<Suspense>` and `connection()` for request-time data. It doesn't turn components into client components.","sources":[{"title":"Next.js: Caching without Cache Components (previous model)","url":"https://nextjs.org/docs/app/guides/caching-without-cache-components"},{"title":"Next.js: Route Segment Config","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config"}],"origin":{"topic":"nextjs","level":"middle","index":23}},{"question":"Which props can be passed from a server page to a client component?","options":["Serializable values and Server Actions; regular functions can't be passed","Any values, including classes and event handlers","Only strings - everything else must be converted to JSON manually"],"answer":0,"explanation":"Props travel over the network in the RSC payload. Objects, arrays, `Date`, `Map`, promises, JSX and Server Functions are supported. You can't pass a regular function (`onClick={() => ...}`) from a server component - declare the handler in the client component.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"},{"title":"react.dev: 'use client'","url":"https://react.dev/reference/rsc/use-client"}],"origin":{"topic":"nextjs","level":"middle","index":24}},{"question":"In the App Router, how do you get data for `generateMetadata` and the page without fetching the API twice via `fetch`?","options":["Do nothing: identical `fetch`es within one render are deduplicated","Save the response to `localStorage` and read it the second time","Use `getStaticProps` next to the `generateMetadata` function"],"answer":0,"explanation":"Request memoization: GET `fetch` requests with the same URL and options within one render run once. For other data sources (ORM, SDK), use React's `cache()`. `getStaticProps` doesn't work in the App Router.","sources":[{"title":"Next.js: Fetching Data","url":"https://nextjs.org/docs/app/getting-started/fetching-data"},{"title":"react.dev: cache","url":"https://react.dev/reference/react/cache"}],"origin":{"topic":"nextjs","level":"middle","index":25}},{"question":"What's the right way to do optimistic UI for a Server Action on the client?","options":["With `useOptimistic` while the action is running","With `router.refresh()` before calling the action","With `revalidatePath` in the client component"],"answer":0,"explanation":"`useOptimistic` shows the expected state immediately and automatically switches back to the real one when the action finishes and fresh data arrives. `revalidatePath` works only on the server. `router.refresh()` before the action won't give instant feedback.","sources":[{"title":"react.dev: useOptimistic","url":"https://react.dev/reference/react/useOptimistic"},{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"}],"origin":{"topic":"nextjs","level":"middle","index":26}},{"question":"What happens with `redirect()` inside `try/catch` in a Server Action?","code":"try {\n await save(data);\n redirect('/done');\n} catch (e) {\n return { error: 'Failed to save' };\n}","options":["`catch` intercepts the redirect's internal exception, so there's no redirect","The redirect works; `catch` runs only if `save` fails","Next.js reports a build error"],"answer":0,"explanation":"`redirect()` and `notFound()` work by throwing special exceptions. A regular `catch` swallows them. The fix is to call `redirect` after the `try/catch` block or rethrow internal errors (`unstable_rethrow(e)`).","sources":[{"title":"Next.js: redirect","url":"https://nextjs.org/docs/app/api-reference/functions/redirect"},{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"}],"origin":{"topic":"nextjs","level":"middle","index":27}},{"question":"How does `<Form>` from `next/form` differ from a plain `<form>` for a search form?","options":["With a string `action`, it performs a client-side navigation with the query","It automatically validates fields against a Zod schema before submitting","It sends data over WebSocket instead of a regular HTTP request"],"answer":0,"explanation":"`<Form action=\"/search\">` turns the fields into `searchParams` and performs an SPA navigation that keeps the shared layout, instead of a full reload. It prefetches shared UI (e.g. `loading.tsx`). Without JS it works like a regular form. With a function in `action`, it behaves like a React form with a Server Action.","sources":[{"title":"Next.js: <Form>","url":"https://nextjs.org/docs/app/api-reference/components/form"}],"origin":{"topic":"nextjs","level":"middle","index":28}},{"question":"What does `generateMetadata` do compared to a static `metadata` export?","options":["Computes metadata dynamically, e.g. from data fetched by `params`","Generates metadata on the client after the page loads","Creates a `sitemap.xml` for all pages"],"answer":0,"explanation":"`export async function generateMetadata({ params }) { const post = await getPost((await params).slug); return { title: post.title } }`. It runs on the server. There's a separate `sitemap.ts` file for sitemaps, and Open Graph images can be generated via `opengraph-image.tsx`.","sources":[{"title":"Next.js: generateMetadata","url":"https://nextjs.org/docs/app/api-reference/functions/generate-metadata"},{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"}],"origin":{"topic":"nextjs","level":"middle","index":29}},{"question":"How do you support multiple languages in the App Router?","options":["An `app/[lang]/...` segment + locale detection in proxy + dictionaries on the server","Enable the `i18n` option in `next.config` - the App Router translates by itself","Create a separate Next.js app for each language"],"answer":0,"explanation":"The App Router doesn't use the built-in `i18n` option from the Pages Router. Typically you create a dynamic `[lang]` segment, redirect the user in proxy based on the `Accept-Language` header and load dictionaries in server components (they don't end up in the bundle). Libraries like next-intl are often used.","sources":[{"title":"Next.js: Internationalization","url":"https://nextjs.org/docs/app/guides/internationalization"},{"title":"Next.js: Proxy (formerly Middleware)","url":"https://nextjs.org/docs/app/getting-started/proxy"}],"origin":{"topic":"nextjs","level":"middle","index":30}},{"question":"How do you return JSON with status 201 from a Route Handler?","options":["`return Response.json(data, { status: 201 })`","`res.status(201).json(data);`","`return { status: 201, body: data };`"],"answer":0,"explanation":"Route Handlers are built on Web APIs: they take a `Request` and return a `Response` (or `NextResponse` with extra features). `res.status().json()` is the Express style used by Pages Router API Routes. A plain object isn't a valid response.","sources":[{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"}],"origin":{"topic":"nextjs","level":"middle","index":31}},{"question":"What is Partial Prerendering (PPR) in Next.js 16?","options":["The page's static shell is sent immediately, and dynamic parts stream in","Prerendering only the first half of the page for speed","A mode where half of the pages are static and half are dynamic"],"answer":0,"explanation":"One route can combine static and dynamic parts: everything that can be prerendered (including `'use cache'`) goes into the shell and is served instantly, while request data streams inside `<Suspense>`. In Next.js 16 it's enabled via `cacheComponents: true` instead of the former experimental flag.","sources":[{"title":"Next.js: cacheComponents","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents"},{"title":"Next.js: Caching (Cache Components)","url":"https://nextjs.org/docs/app/getting-started/caching"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"middle","index":32}},{"question":"How do you prefetch data for client components using TanStack Query in the App Router?","options":["`prefetchQuery` on the server and `HydrationBoundary`","Call `useQuery` directly in an async server component","Put the `QueryClient` instance into the page's `metadata` export"],"answer":0,"explanation":"A server component creates a `QueryClient`, runs `prefetchQuery` and passes the cache state via `<HydrationBoundary state={dehydrate(qc)}>`. A client `useQuery` with the same key gets the data immediately. Hooks don't work in server components.","sources":[{"title":"TanStack Query: Advanced SSR","url":"https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr"},{"title":"Next.js: Fetching Data","url":"https://nextjs.org/docs/app/getting-started/fetching-data"}],"origin":{"topic":"nextjs","level":"middle","index":33}},{"question":"What happens when you import a server component into a `'use client'` file?","options":["It becomes a client component, and server code breaks or leaks","It stays a server component: Next.js splits the modules at build time","The import is ignored, and the component doesn't render"],"answer":0,"explanation":"Everything imported from a client module goes into the client bundle. If the component accessed the DB, the build fails (or worse, the code reaches the browser). Pass a server component to a client one as `children` or another prop from a server parent.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"},{"title":"react.dev: 'use client'","url":"https://react.dev/reference/rsc/use-client"}],"origin":{"topic":"nextjs","level":"middle","index":34}},{"question":"How do you run code (e.g. analytics) after the response is sent, without delaying the user?","options":["Use `after()` from `next/server`","Start a promise without `await` in a server component","Call `setTimeout` in a server component"],"answer":0,"explanation":"`after(() => log(...))` schedules work after the response finishes (in server components, Server Actions, Route Handlers, proxy). A \"dangling\" promise in a serverless environment can be cut off when the function ends, and its errors get lost.","sources":[{"title":"Next.js: after","url":"https://nextjs.org/docs/app/api-reference/functions/after"}],"origin":{"topic":"nextjs","level":"middle","index":35}},{"question":"In Next.js, how do you send only part of the DB data to the client so nothing extra (like a password hash) leaks?","options":["Return DTOs with only the needed fields from the data access layer","Pass the whole user object: React hides the extra fields","Delete the extra fields in the client component after receiving them"],"answer":0,"explanation":"Everything in a client component's props is serialized into the HTML and RSC payload and visible in DevTools. A Data Access Layer that checks permissions and returns minimal DTOs is recommended. You can also use the taint API to forbid passing certain objects to the client.","sources":[{"title":"Next.js: Data Security","url":"https://nextjs.org/docs/app/guides/data-security"}],"origin":{"topic":"nextjs","level":"middle","index":36}},{"question":"How does `revalidatePath('/blog/[slug]', 'page')` differ from `revalidatePath('/blog/my-post')`?","options":["The first covers all pages of the pattern, the second one specific path","No difference: the second argument `'page'` is simply ignored","The first invalidates only the layout, the second only the page"],"answer":0,"explanation":"If you pass a pattern with a dynamic segment, you must specify the type `'page'` or `'layout'`, and invalidation affects all paths matching the pattern. A specific path invalidates one page. `revalidatePath('/', 'layout')` resets the whole app.","sources":[{"title":"Next.js: revalidatePath","url":"https://nextjs.org/docs/app/api-reference/functions/revalidatePath"}],"origin":{"topic":"nextjs","level":"middle","index":37}},{"question":"Where should you store a secret API key used in a server component?","options":["In an environment variable without the `NEXT_PUBLIC_` prefix","In `NEXT_PUBLIC_API_KEY` so it's available everywhere","Right in the component's code - it's a server component anyway"],"answer":0,"explanation":"Variables without the prefix are available only on the server. `NEXT_PUBLIC_*` variables are inlined into the client bundle and visible to everyone. Hardcoding ends up in the repository. `.env*.local` files aren't committed, and in production the values are set on the platform.","sources":[{"title":"Next.js: Environment Variables","url":"https://nextjs.org/docs/app/guides/environment-variables"},{"title":"Next.js: Data Security","url":"https://nextjs.org/docs/app/guides/data-security"}],"origin":{"topic":"nextjs","level":"middle","index":38}},{"question":"What does `connection()` from `next/server` do?","options":["Signals that rendering from here on must wait for an actual request","Opens a database connection pool for the current request","Checks that the user has an internet connection"],"answer":0,"explanation":"It's needed when a component uses values that mustn't be computed during prerendering but doesn't access `cookies()` or `headers()`: for example, `Math.random()` or the current time. With Cache Components, such a component goes inside `<Suspense>`.","sources":[{"title":"Next.js: connection","url":"https://nextjs.org/docs/app/api-reference/functions/connection"}],"origin":{"topic":"nextjs","level":"middle","index":39}},{"question":"Why is `useFormStatus` handy in forms with Server Actions?","options":["It gives the parent form's `pending` state so you can disable the button","It returns the validation result of each form field","It lets you submit the form programmatically, without a button or click"],"answer":0,"explanation":"The hook is called in a component inside `<form>` (usually the submit button): `const { pending } = useFormStatus()`. This lets you build a reusable `<SubmitButton>`. The action's result and errors are held by `useActionState`.","sources":[{"title":"react.dev: useFormStatus","url":"https://react.dev/reference/react-dom/hooks/useFormStatus"},{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"}],"origin":{"topic":"nextjs","level":"middle","index":40}},{"question":"Which file sets the fallback for a parallel route slot on a full page reload?","options":["`default.tsx`","`fallback.tsx`","`slot.tsx`"],"answer":0,"explanation":"During soft navigation, Next.js remembers the active state of slots. After a reload, it can't restore the state of slots that don't match the URL, so it renders their `default.tsx` (or a 404 if the file is missing). For a modal, `@modal/default.tsx` usually returns `null`.","sources":[{"title":"Next.js: Parallel Routes","url":"https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes"}],"origin":{"topic":"nextjs","level":"middle","index":41}},{"question":"How does a static route differ from a dynamic one in terms of rendering?","options":["Static - at build time, dynamic - on every request","A static route can't contain any JavaScript","Dynamic means any route with a `[param]` segment in its path"],"answer":0,"explanation":"A route becomes dynamic when it uses request data: `cookies()`, `headers()`, `searchParams`, uncached requests. A `[slug]` segment by itself doesn't do that - it can be prerendered via `generateStaticParams`. With Cache Components, the boundary runs inside the page (PPR).","sources":[{"title":"Next.js: Rendering Philosophy","url":"https://nextjs.org/docs/app/guides/rendering-philosophy"},{"title":"Next.js: Caching (Cache Components)","url":"https://nextjs.org/docs/app/getting-started/caching"}],"origin":{"topic":"nextjs","level":"middle","index":42}},{"question":"Where is the right place to check authorization in the App Router?","options":["Close to the data: in the Data Access Layer, Server Actions and Route Handlers","Only in `proxy.ts` - after it, all routes are considered protected","Only in a client component, by hiding buttons from guests"],"answer":0,"explanation":"Proxy is fine for optimistic checks and redirects but shouldn't be the only protection: Server Actions are called directly, and layouts don't re-render on navigation. Check the session and permissions reliably where data is read and changed. Hiding buttons on the client isn't security.","sources":[{"title":"Next.js: Authentication","url":"https://nextjs.org/docs/app/guides/authentication"},{"title":"Next.js: Data Security","url":"https://nextjs.org/docs/app/guides/data-security"}],"origin":{"topic":"nextjs","level":"middle","index":43}},{"question":"How do you limit which paths `proxy.ts` runs on?","options":["Export a `config` with a `matcher`","Create a separate proxy in each route folder","List the paths in the `proxyRoutes` section of `next.config`"],"answer":0,"explanation":"`export const config = { matcher: ['/dashboard/:path*'] }` - proxy runs only for matching paths. Static files and `_next` are usually excluded to save resources. There's one proxy per project, located at the root (or in `src`).","sources":[{"title":"Next.js: Proxy (formerly Middleware)","url":"https://nextjs.org/docs/app/getting-started/proxy"}],"origin":{"topic":"nextjs","level":"middle","index":44}},{"question":"What is `opengraph-image.tsx` useful for?","options":["Generating the route's OG image from JSX at build time or on request","Optimizing all images on the page for social media sharing","Adding a watermark to all of the route's images"],"answer":0,"explanation":"By convention the file returns an `ImageResponse` with JSX markup - Next.js turns it into a PNG and adds the necessary `<meta>` tags. Handy for article previews with a title. In Next.js 16, `params` in such files is a promise too.","sources":[{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"middle","index":45}},{"question":"Where does a client component's code run on the first page load?","options":["Both on the server (for HTML) and in the browser (hydration)","Only in the browser; it's skipped on the server","Only on the server; the browser gets ready HTML without JS"],"answer":0,"explanation":"`'use client'` doesn't mean \"client only\": the component is prerendered to HTML on the server and then hydrated. That's why you can't access `window` during render without checks - use effects or `next/dynamic` with `ssr: false`.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"},{"title":"react.dev: 'use client'","url":"https://react.dev/reference/rsc/use-client"}],"origin":{"topic":"nextjs","level":"middle","index":46}},{"question":"How is page data updated after an action if `revalidateTag(tag, 'max')` is used?","options":["The visitor gets the old data, and fresh data is generated in the background","The page instantly reloads for all users","The data updates only after the project is rebuilt"],"answer":0,"explanation":"The `'max'` profile gives stale-while-revalidate semantics: the entry is marked stale, the first request gets the old version and triggers regeneration. If the author of the change should see the result immediately, use `updateTag` in a Server Action.","sources":[{"title":"Next.js: revalidateTag","url":"https://nextjs.org/docs/app/api-reference/functions/revalidateTag"},{"title":"Next.js: updateTag","url":"https://nextjs.org/docs/app/api-reference/functions/updateTag"}],"origin":{"topic":"nextjs","level":"middle","index":47}},{"question":"What does `staleTimes` in `next.config` control?","options":["How long segments live in the client router cache","How long `fetch` responses live in the server cache","The timeout for generating static pages at build time"],"answer":0,"explanation":"The client router cache stores the RSC payload of visited and prefetched segments so back/forward navigation and repeat visits are instant. `staleTimes` sets how long this data is considered fresh for dynamic and static pages. The server data cache is configured separately.","sources":[{"title":"Next.js: staleTimes","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/staleTimes"},{"title":"Next.js: Prefetching","url":"https://nextjs.org/docs/app/guides/prefetching"}],"origin":{"topic":"nextjs","level":"middle","index":48}},{"question":"How do you return validation errors to a form from a Server Action?","options":["Return an errors object and read it via `useActionState`","Throw an exception - it appears next to the field","Call `alert()` on the server"],"answer":0,"explanation":"Expected errors (an invalid email) are returned as data: `return { errors: { email: 'Invalid address' } }`. The form renders them via the `useActionState` state. Exceptions are reserved for unexpected failures - `error.tsx` catches them.","sources":[{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"},{"title":"Next.js: Error Handling","url":"https://nextjs.org/docs/app/getting-started/error-handling"},{"title":"react.dev: useActionState","url":"https://react.dev/reference/react/useActionState"}],"origin":{"topic":"nextjs","level":"middle","index":49}},{"question":"How can a layout highlight the active tab among its child segments?","code":"'use client'\nconst segment = useSelectedLayoutSegment() // 'settings' on /dashboard/settings","options":["Use `useSelectedLayoutSegment()` in a client component rendered by the layout","Read the `params` prop of the layout - it contains child segments","Layouts can't know which child page is active"],"answer":0,"explanation":"Layouts don't re-render on navigation and don't get the child's path. The hook returns the active segment one level below the layout (`useSelectedLayoutSegments` returns all of them).","sources":[{"title":"Next.js: useSelectedLayoutSegment","url":"https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment"}],"origin":{"topic":"nextjs","level":"middle","index":50}},{"question":"What happens in Next.js 16 if a parallel route slot `@modal` has no `default.tsx`?","options":["The build fails - every parallel slot now needs an explicit `default.js`","The slot silently renders nothing","Next.js generates a default that renders `notFound()`"],"answer":0,"explanation":"`default.tsx` is rendered when Next.js can't recover the slot's active state after a full page load. Return `null` from it if the slot should be empty.","sources":[{"title":"Next.js: default.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/default"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"middle","index":51}},{"question":"How does a rewrite differ from a redirect in `next.config.ts`?","options":["A rewrite serves another path's content while the browser URL stays the same; a redirect sends the browser to a new URL","They are the same, but rewrites are permanent","Rewrites work only for external URLs"],"answer":0,"explanation":"Rewrites act as a proxy, e.g. mapping `/api/:path*` to another backend or an old app during migration. The user never sees the destination URL.","sources":[{"title":"Next.js: rewrites (next.config)","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/rewrites"},{"title":"Next.js: redirects (next.config)","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/redirects"}],"origin":{"topic":"nextjs","level":"middle","index":52}},{"question":"Where can you add security headers like `X-Frame-Options` to all responses without touching pages?","code":"async headers() {\n return [{ source: '/(.*)', headers: [{ key: 'X-Frame-Options', value: 'DENY' }] }]\n}","options":["In `headers()` in `next.config.ts` (or in `proxy.ts` for dynamic values)","Only via a `<meta>` tag in the root layout","In `metadata.headers`"],"answer":0,"explanation":"Config headers apply by path pattern. Headers that depend on the request, like a CSP nonce, are set in `proxy.ts`.","sources":[{"title":"Next.js: headers (next.config)","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/headers"},{"title":"Next.js: Content Security Policy","url":"https://nextjs.org/docs/app/guides/content-security-policy"}],"origin":{"topic":"nextjs","level":"middle","index":53}},{"question":"A form uploads a 5 MB file via a Server Action and fails. What's the likely cause?","options":["Server Action request bodies are limited to 1 MB by default; raise `serverActions.bodySizeLimit` or upload directly to storage","Server Actions can't accept `FormData`","Files must be base64-encoded first"],"answer":0,"explanation":"The limit protects the server from large-payload attacks. For big files, a signed upload URL to object storage avoids sending the bytes through your server.","sources":[{"title":"Next.js: serverActions config","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions"}],"origin":{"topic":"nextjs","level":"middle","index":54}},{"question":"What does `redirect()` in a Server Action do for a form submitted before JavaScript loaded?","options":["It responds with a 303 redirect, so the browser follows it with a GET","It does nothing until hydration","It returns a 500 error"],"answer":0,"explanation":"When JavaScript is available, `redirect` performs a client-side navigation. The 303 status keeps progressive enhancement working without re-posting the form.","sources":[{"title":"Next.js: redirect","url":"https://nextjs.org/docs/app/api-reference/functions/redirect"},{"title":"Next.js: Forms","url":"https://nextjs.org/docs/app/guides/forms"}],"origin":{"topic":"nextjs","level":"middle","index":55}},{"question":"Why can't you call `(await cookies()).set(...)` while rendering a server component?","options":["Cookies can be set only in Server Actions, Route Handlers or `proxy.ts` - headers may already be streaming during render","`cookies()` is read-only everywhere","Setting cookies requires a client component"],"answer":0,"explanation":"HTTP headers must be sent before the body. Render may stream, so Next.js only allows writing cookies where the response is fully controlled.","sources":[{"title":"Next.js: cookies","url":"https://nextjs.org/docs/app/api-reference/functions/cookies"}],"origin":{"topic":"nextjs","level":"middle","index":56}},{"question":"What is `output: 'standalone'` useful for?","options":["Building a minimal server folder with only the needed `node_modules`, e.g. for a small Docker image","Exporting static HTML files","Running Next.js without Node.js"],"answer":0,"explanation":"The build traces imported files and copies them to `.next/standalone` with a `server.js`. `public` and `.next/static` must be copied separately or served from a CDN.","sources":[{"title":"Next.js: output","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/output"},{"title":"Next.js: Self-Hosting","url":"https://nextjs.org/docs/app/guides/self-hosting"}],"origin":{"topic":"nextjs","level":"middle","index":57}},{"question":"How do you generate a dynamic Open Graph image (e.g. with the post title) in code?","code":"// app/blog/[slug]/opengraph-image.tsx\nimport { ImageResponse } from 'next/og'\n\nexport default async function Image({ params }) {\n const { slug } = await params\n return new ImageResponse(<div style={{ fontSize: 64 }}>{slug}</div>)\n}","options":["Return `ImageResponse` from `next/og` in an `opengraph-image.tsx` file","Render the page in a headless browser and take a screenshot","Use `next/image` with `og` prop"],"answer":0,"explanation":"`ImageResponse` turns JSX and a subset of CSS (flexbox) into a PNG. By default the image is generated at build time and cached unless it uses request-time APIs.","sources":[{"title":"Next.js: ImageResponse","url":"https://nextjs.org/docs/app/api-reference/functions/image-response"},{"title":"Next.js: opengraph-image and twitter-image","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image"}],"origin":{"topic":"nextjs","level":"middle","index":58}},{"question":"How do you split a sitemap of 200,000 product URLs?","options":["Use `generateSitemaps` to return several sitemap ids, and the `sitemap` function builds one file per id","One sitemap can hold unlimited URLs","Put every URL into `robots.txt`"],"answer":0,"explanation":"Search engines limit a sitemap to 50,000 URLs. Each id produces a separate URL like `/product/sitemap/0.xml`; in Next.js 16 the `id` argument is a Promise.","sources":[{"title":"Next.js: generateSitemaps","url":"https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps"},{"title":"Next.js: sitemap.xml","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap"}],"origin":{"topic":"nextjs","level":"middle","index":59}},{"question":"What is `instrumentation-client.ts` for?","options":["Running client-side monitoring or analytics setup before the app becomes interactive","Registering OpenTelemetry on the server","Configuring the client router's cache"],"answer":0,"explanation":"Put it in the project root (or `src`). It needs no exports - the code simply runs early in the browser, e.g. to init error tracking.","sources":[{"title":"Next.js: instrumentation-client.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client"},{"title":"Next.js: Instrumentation","url":"https://nextjs.org/docs/app/guides/instrumentation"}],"origin":{"topic":"nextjs","level":"middle","index":60}},{"question":"What does `'use cache: private'` allow?","options":["Caching a function that reads `cookies()` or `headers()`; the result isn't stored in a server cache across requests","Sharing cached data between all users","Storing the cache in a private Redis instance"],"answer":0,"explanation":"Results can be reused within a request and kept in the browser's router cache for the `stale` time. Use it for per-user data you want to prefetch.","sources":[{"title":"Next.js: 'use cache: private'","url":"https://nextjs.org/docs/app/api-reference/directives/use-cache-private"},{"title":"Next.js: 'use cache'","url":"https://nextjs.org/docs/app/api-reference/directives/use-cache"}],"origin":{"topic":"nextjs","level":"middle","index":61}},{"question":"With Cache Components, how do you keep `new Date()` out of the static shell?","code":"async function CurrentTime() {\n await io()\n return <p>{new Date().toISOString()}</p>\n}","options":["Call `await io()` from `next/cache` before reading it, inside a `<Suspense>` boundary","Wrap it in `'use cache'`","Use `Date.now()` instead"],"answer":0,"explanation":"`'use cache'` captures the value once for everyone. `io()` suspends during prerendering; unlike `connection()`, it doesn't block prefetching.","sources":[{"title":"Next.js: io","url":"https://nextjs.org/docs/app/api-reference/functions/io"},{"title":"Next.js: connection","url":"https://nextjs.org/docs/app/api-reference/functions/connection"}],"origin":{"topic":"nextjs","level":"middle","index":62}},{"question":"How can a deeply nested server component read the `[lang]` segment of the root layout without prop drilling?","code":"import { lang } from 'next/root-params'\n\nconst current = await lang()","options":["Import the generated getter from `next/root-params`","Call `useParams()` in the server component","Store it in a global variable in the root layout"],"answer":0,"explanation":"Root params are dynamic segments above the root layout. The getters work in server components but not in client components, Server Actions or Route Handlers.","sources":[{"title":"Next.js: next/root-params","url":"https://nextjs.org/docs/app/api-reference/functions/next-root-params"}],"origin":{"topic":"nextjs","level":"middle","index":63}},{"question":"What is `catchError` from `next/error` for?","options":["Creating a component-level error boundary that works with `redirect()`/`notFound()` and offers `retry()`","Logging server errors to a file","Catching errors in `proxy.ts`"],"answer":0,"explanation":"It's a programmatic alternative to `error.tsx` that can wrap any part of the tree. It doesn't swallow Next.js control-flow errors and clears on navigation.","sources":[{"title":"Next.js: catchError","url":"https://nextjs.org/docs/app/api-reference/functions/catchError"},{"title":"Next.js: Error Handling","url":"https://nextjs.org/docs/app/getting-started/error-handling"}],"origin":{"topic":"nextjs","level":"middle","index":64}},{"question":"A monorepo package `@acme/ui` ships untranspiled TypeScript. How do you use it in a Next.js app?","options":["Add it to `transpilePackages` in `next.config.ts`","Copy its files into `app/`","It's impossible; publish it as compiled JS first"],"answer":0,"explanation":"`transpilePackages` lets Next.js compile dependencies from local packages or `node_modules`, replacing the old `next-transpile-modules` plugin.","sources":[{"title":"Next.js: transpilePackages","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/transpilePackages"}],"origin":{"topic":"nextjs","level":"middle","index":65}},{"question":"How do you stream a response gradually from a Route Handler (e.g. AI tokens)?","code":"export async function GET() {\n const stream = new ReadableStream({\n async start(controller) {\n for await (const chunk of tokens()) controller.enqueue(chunk)\n controller.close()\n },\n })\n return new Response(stream)\n}","options":["Return a `Response` whose body is a `ReadableStream`","Call `res.write()` like in Express","Streaming works only with the Edge runtime"],"answer":0,"explanation":"Route Handlers use the Web `Response` API, so any stream works on the Node.js runtime too. Add `text/event-stream` headers for SSE.","sources":[{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"},{"title":"MDN: ReadableStream","url":"https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream"}],"origin":{"topic":"nextjs","level":"middle","index":66}},{"question":"What does `export const maxDuration = 60` do in a page or Route Handler?","options":["Sets the maximum execution time (in seconds) for that route's server function on platforms that support it","Caches the route for 60 seconds","Delays the response by 60 seconds"],"answer":0,"explanation":"It's a route segment config read by deployment platforms. Server Actions inherit it from the page that uses them.","sources":[{"title":"Next.js: maxDuration","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/maxDuration"},{"title":"Next.js: Route Segment Config","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config"}],"origin":{"topic":"nextjs","level":"middle","index":67}},{"question":"With `cacheComponents: true`, why does `export const revalidate = 60` in a page fail?","options":["`revalidate`, `dynamic` and `fetchCache` segment configs are removed with Cache Components; use `'use cache'` + `cacheLife`","`revalidate` must be a string","It works only in layouts"],"answer":0,"explanation":"Cache Components move caching decisions from the route to individual functions and components, so route-wide flags no longer apply.","sources":[{"title":"Next.js: Route Segment Config","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config"},{"title":"Next.js: cacheLife","url":"https://nextjs.org/docs/app/api-reference/functions/cacheLife"},{"title":"Next.js: cacheComponents","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents"}],"origin":{"topic":"nextjs","level":"middle","index":68}},{"question":"What is the recommended way to test an `async` server component?","options":["End-to-end tests (e.g. Playwright), since unit tools don't fully support async server components yet","Render it with `@testing-library/react` like any component","Snapshot its JSX with Jest"],"answer":0,"explanation":"Synchronous server and client components can be unit-tested with Vitest or Jest. Data functions can be tested separately as plain async code.","sources":[{"title":"Next.js: Testing","url":"https://nextjs.org/docs/app/guides/testing"},{"title":"Playwright","url":"https://playwright.dev/docs/intro"}],"origin":{"topic":"nextjs","level":"middle","index":69}},{"question":"How do you call a Server Action from a button's `onClick` (not a form) and show pending state?","code":"const [isPending, startTransition] = useTransition()\n<button onClick={() => startTransition(() => likePost(id))}>","options":["Wrap the call in `startTransition` from `useTransition`","Server Actions can only be used in `<form action>`","Call it inside `useEffect`"],"answer":0,"explanation":"The transition gives `isPending` and lets Next.js update the UI with revalidated data from the action's response.","sources":[{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"},{"title":"react.dev: useTransition","url":"https://react.dev/reference/react/useTransition"}],"origin":{"topic":"nextjs","level":"middle","index":70}},{"question":"With Cache Components, why does a form keep its typed text after navigating away and pressing Back?","options":["Next.js hides previous routes with React `<Activity>` instead of unmounting, preserving state and DOM","The browser restores form values from `localStorage`","Next.js serializes component state into the URL"],"answer":0,"explanation":"Up to 3 routes are preserved. Transient UI like open dropdowns should be reset in an effect cleanup, or keyed by `bfcacheId`.","sources":[{"title":"Next.js: Preserving UI state","url":"https://nextjs.org/docs/app/guides/preserving-ui-state"},{"title":"react.dev: <Activity>","url":"https://react.dev/reference/react/Activity"}],"origin":{"topic":"nextjs","level":"middle","index":71}},{"question":"When does `prefetch={false}` on `<Link>` make sense?","options":["For long lists of rarely-clicked links (e.g. footer or table rows) to avoid many prefetch requests","Always, to save bandwidth","For links to the current page"],"answer":0,"explanation":"Without prefetching, the route loads on click (hover may still help with a custom handler). `useLinkStatus` can show pending state for such links.","sources":[{"title":"Next.js: <Link>","url":"https://nextjs.org/docs/app/api-reference/components/link"},{"title":"Next.js: Prefetching","url":"https://nextjs.org/docs/app/guides/prefetching"}],"origin":{"topic":"nextjs","level":"middle","index":72}},{"question":"What happens when navigating between two routes that use different root layouts (via route groups)?","options":["A full page load happens instead of client-side navigation","Both root layouts are rendered nested","The build fails"],"answer":0,"explanation":"Each root layout owns its own `<html>` and `<body>`, so the client can't keep the shared tree. Use multiple root layouts for truly separate sections.","sources":[{"title":"Next.js: Route Groups","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-groups"}],"origin":{"topic":"nextjs","level":"middle","index":73}},{"question":"A Server Action works locally but fails behind a reverse proxy with a different host. Which option helps?","options":["`serverActions.allowedOrigins` with the proxy's domain","`images.remotePatterns`","`basePath`"],"answer":0,"explanation":"Next.js compares the `Origin` and `Host` headers to block CSRF. Trusted extra origins must be listed explicitly.","sources":[{"title":"Next.js: serverActions config","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions"}],"origin":{"topic":"nextjs","level":"middle","index":74}}]}],"$L33"] </article></body></html>

e:[["$","$L25",null,{"href":"/en","className":"self-start text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100","children":"← All topics"}],["$","$L32","en/nextjs/middle",{"topic":"nextjs","level":"middle","title":"Next.js · Middle","questions":[{"question":"What is a Server Function (Server Action) in Next.js?","options":["An async function marked `'use server'` that can be called from the client","A Route Handler that is automatically created for every page","A function that runs at build time and caches its result"],"answer":0,"explanation":"The `'use server'` directive turns a function into a server function, and Next.js creates an endpoint for it. You can pass it to `

` or call it from a client handler. The call is a POST request. Server Actions are Server Functions used for mutations, often followed by cache revalidation.","sources":[{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"},{"title":"react.dev: 'use server'","url":"https://react.dev/reference/rsc/use-server"}],"origin":{"topic":"nextjs","level":"middle","index":0}},{"question":"What does `` with a Server Action give you compared to `onSubmit` + `fetch`?","options":["The form works even before JS loads (progressive enhancement), with no API route","The form submits faster thanks to a persistent WebSocket connection","Form data is automatically validated against the database schema"],"answer":0,"explanation":"A Server Action receives `FormData` directly, so you don't need a Route Handler and a client `fetch`. If the form is rendered by a server component, it submits even before hydration. You still write validation yourself (e.g. with Zod). Submission state is shown via `useActionState` or `useFormStatus`.","sources":[{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"},{"title":"react.dev: useActionState","url":"https://react.dev/reference/react/useActionState"}],"origin":{"topic":"nextjs","level":"middle","index":1}},{"question":"What does `revalidatePath('/blog')` do after a mutation?","options":["Marks the cached data and UI of the `/blog` route as stale","Restarts the Next.js server to clear the whole cache","Redirects the user to the `/blog` page after the action"],"answer":0,"explanation":"The next request to `/blog` gets fresh data. When called in a Server Action, the updated UI comes back right in the action's response. For targeted invalidation of data used on many pages, tags are more convenient (`cacheTag` + `revalidateTag`/`updateTag`).","sources":[{"title":"Next.js: revalidatePath","url":"https://nextjs.org/docs/app/api-reference/functions/revalidatePath"},{"title":"Next.js: Revalidating","url":"https://nextjs.org/docs/app/getting-started/revalidating"}],"origin":{"topic":"nextjs","level":"middle","index":2}},{"question":"How does `updateTag` differ from `revalidateTag` in Next.js 16?","options":["`updateTag` expires the cache immediately (read-your-writes), `revalidateTag` is stale-while-revalidate","`updateTag` works only in Route Handlers, while `revalidateTag` works only in proxy","They're synonyms; `revalidateTag` is deprecated in favor of `updateTag`"],"answer":0,"explanation":"`updateTag` is available only in Server Actions: the user who changed the data sees the changes immediately. `revalidateTag(tag, 'max')` marks data as stale: visitors see the old version while the new one is prepared in the background - good for blogs and catalogs. In Next.js 16, `revalidateTag` requires a second argument - a `cacheLife` profile.","sources":[{"title":"Next.js: updateTag","url":"https://nextjs.org/docs/app/api-reference/functions/updateTag"},{"title":"Next.js: revalidateTag","url":"https://nextjs.org/docs/app/api-reference/functions/revalidateTag"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"middle","index":3}},{"question":"Are `fetch` requests in server components cached by default (Next.js 15+, without Cache Components)?","options":["No: they aren't cached by default; enable caching with `cache: 'force-cache'`","Yes: all `fetch`es are cached forever; disable it with `no-store`","Yes, but only GET requests to domains listed in `next.config`"],"answer":0,"explanation":"In Next.js 14, `fetch` was cached by default, which often surprised people. Since version 15 the behavior is the opposite. With Cache Components enabled, caching is explicit via `'use cache'`, and uncached data streams inside ``.","sources":[{"title":"Next.js: Caching without Cache Components (previous model)","url":"https://nextjs.org/docs/app/guides/caching-without-cache-components"},{"title":"Next.js: Upgrading to Version 15","url":"https://nextjs.org/docs/app/guides/upgrading/version-15"}],"origin":{"topic":"nextjs","level":"middle","index":4}},{"question":"What does the `'use cache'` directive do?","options":["Caches the result of an async function or component; arguments are part of the cache key","Enables caching of all `fetch`es across the whole app at once and forever","Saves a client component's state to the browser's `localStorage`"],"answer":0,"explanation":"`'use cache'` works with `cacheComponents: true`: at the level of a data function, a component or a whole file. Arguments and captured values become part of the key. The lifetime is set with `cacheLife`, invalidation tags with `cacheTag`. A cached result can become part of the page's static shell.","sources":[{"title":"Next.js: 'use cache'","url":"https://nextjs.org/docs/app/api-reference/directives/use-cache"},{"title":"Next.js: Caching (Cache Components)","url":"https://nextjs.org/docs/app/getting-started/caching"}],"origin":{"topic":"nextjs","level":"middle","index":5}},{"question":"Why can't you call `cookies()` inside a function with `'use cache'`?","options":["The cache is shared across requests, while cookies are per-request data","`cookies()` works only in client components","It's a restriction of development mode only"],"answer":0,"explanation":"If a cached function read cookies, one user's data could be served to another. The right way is to read cookies outside and pass the needed value as an argument (it becomes part of the key). For rare cases there's `'use cache: private'`, which doesn't store the result in the server cache across requests.","sources":[{"title":"Next.js: 'use cache'","url":"https://nextjs.org/docs/app/api-reference/directives/use-cache"},{"title":"Next.js: cookies","url":"https://nextjs.org/docs/app/api-reference/functions/cookies"}],"origin":{"topic":"nextjs","level":"middle","index":6}},{"question":"Which `cacheLife` profile applies if you don't specify one in `'use cache'`?","options":["`default`","`max`","`seconds`"],"answer":0,"explanation":"The `default` profile: stale 5 minutes, revalidate 15 minutes, expire never. There are presets `seconds`, `minutes`, `hours`, `days`, `weeks`, `max`, and custom profiles in `next.config`. The docs recommend always specifying `cacheLife` explicitly so the behavior is clear at the call site.","sources":[{"title":"Next.js: cacheLife","url":"https://nextjs.org/docs/app/api-reference/functions/cacheLife"}],"origin":{"topic":"nextjs","level":"middle","index":7}},{"question":"What is `cacheTag('products')` inside a cached function for?","options":["To invalidate entries with this tag later","To send the tag in a response header for CDN caching","To limit the cache to the `/products` route only"],"answer":0,"explanation":"Tags link cache entries to a type of data rather than a URL. One product mutation can invalidate every page and component that uses products: `revalidateTag('products', 'max')`. You can set several tags, e.g. a general one and one with an id: `cacheTag('products', `product-${id}`)`.","sources":[{"title":"Next.js: cacheTag","url":"https://nextjs.org/docs/app/api-reference/functions/cacheTag"},{"title":"Next.js: revalidateTag","url":"https://nextjs.org/docs/app/api-reference/functions/revalidateTag"}],"origin":{"topic":"nextjs","level":"middle","index":8}},{"question":"What does `loading.tsx` do during client navigation to a segment with slow data?","options":["Immediately shows a fallback, keeping the shared layout, while the segment loads","Blocks navigation until the data is fully loaded","Performs a full page reload with the browser's indicator"],"answer":0,"explanation":"Navigation is instant: the layout stays interactive, the `loading.tsx` fallback is shown instead of the page, and the content streams in. The fallback can be prefetched along with the link. Without `loading.tsx` or ``, navigation would wait for the data.","sources":[{"title":"Next.js: loading.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/loading"},{"title":"Next.js: Linking and Navigating","url":"https://nextjs.org/docs/app/getting-started/linking-and-navigating"}],"origin":{"topic":"nextjs","level":"middle","index":9}},{"question":"What does `generateStaticParams` do?","options":["Returns segment values to prerender at build time","Generates random route parameters for A/B tests","Creates query parameters for all ``s on the page"],"answer":0,"explanation":"`export function generateStaticParams() { return posts.map(p => ({ slug: p.slug })) }` - these pages are built ahead of time. It replaces `getStaticPaths` from the Pages Router. With Cache Components, the function must return at least one set of params - that's how the build verifies the route doesn't access request data incorrectly.","sources":[{"title":"Next.js: generateStaticParams","url":"https://nextjs.org/docs/app/api-reference/functions/generate-static-params"}],"origin":{"topic":"nextjs","level":"middle","index":10}},{"question":"How do you show a page with slow data in Next.js without delaying the whole page?","options":["Wrap the slow component in `` - it streams in later","Move data loading into a client component's `useEffect`","Increase the server response timeout in `next.config`"],"answer":0,"explanation":"The server sends the shell and fallback right away and appends the slow block's HTML to the stream when it's ready. Loading in `useEffect` sends empty HTML, adds a request waterfall and hurts LCP. With Cache Components, uncached data must be inside ``.","sources":[{"title":"Next.js: Streaming","url":"https://nextjs.org/docs/app/guides/streaming"},{"title":"Next.js: Caching (Cache Components)","url":"https://nextjs.org/docs/app/getting-started/caching"}],"origin":{"topic":"nextjs","level":"middle","index":11}},{"question":"How do you avoid a request waterfall if a component needs independent `getUser()` and `getPosts()`?","options":["Start both requests at once and wait with `Promise.all`","Call them sequentially with two separate `await`s","Move both requests into separate `useEffect`s on the client"],"answer":0,"explanation":"Sequential `await`s add up the waiting time. `const [user, posts] = await Promise.all([getUser(), getPosts()])` runs them in parallel. Another option is to pass promises down and unwrap them with `use()` under separate Suspense boundaries so parts of the UI appear independently.","sources":[{"title":"Next.js: Fetching Data","url":"https://nextjs.org/docs/app/getting-started/fetching-data"}],"origin":{"topic":"nextjs","level":"middle","index":12}},{"question":"How do you avoid a double DB query if both `generateMetadata` and the page call `getUser(id)`?","options":["Wrap the function in React's `cache()` - deduplication within one request","Store the user in a module-level global variable on the server","Pass the data from `generateMetadata` to the page via its props"],"answer":0,"explanation":"`cache()` memoizes calls with the same arguments for the duration of one server render. Next.js deduplicates `fetch` with identical parameters itself, but ORMs and SDKs need `cache()`. A global variable would mix different users' data.","sources":[{"title":"react.dev: cache","url":"https://react.dev/reference/react/cache"},{"title":"Next.js: Fetching Data","url":"https://nextjs.org/docs/app/getting-started/fetching-data"}],"origin":{"topic":"nextjs","level":"middle","index":13}},{"question":"How do you guarantee a module with secrets never ends up in the client bundle?","options":["Add `import 'server-only'` to it","Name the file with a `.server.ts` suffix","Put it in the `public` folder"],"answer":0,"explanation":"The `server-only` package causes a build error if the module is imported from a client component. This protects against accidentally leaking DB code or keys. There's a matching `client-only` package. The `.server` suffix does nothing in the App Router, and `public` is served to everyone.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"},{"title":"Next.js: Data Security","url":"https://nextjs.org/docs/app/guides/data-security"}],"origin":{"topic":"nextjs","level":"middle","index":14}},{"question":"Can you use `next/dynamic` with `ssr: false` in a server component?","options":["No: `ssr: false` is allowed only in client components","Yes, it's the main way to disable SSR for a page","Yes, but only in `layout.tsx`"],"answer":0,"explanation":"Use the `ssr: false` option inside a `'use client'` file: for example, for a component that accesses `window` on import. In a server component, Next.js throws an error. Server components don't ship their code to the browser anyway.","sources":[{"title":"Next.js: Lazy Loading","url":"https://nextjs.org/docs/app/guides/lazy-loading"}],"origin":{"topic":"nextjs","level":"middle","index":15}},{"question":"Why wrap a component using `useSearchParams()` in ``?","options":["Otherwise everything up to the nearest boundary drops out of prerendering","Without Suspense, `useSearchParams` always returns `null` on the client","It's needed only for correct behavior in Safari and iOS"],"answer":0,"explanation":"Query parameters are unknown during prerendering. If a Suspense boundary sits close to the component, the rest of the page goes into static HTML and only this piece renders on the client. Without a boundary, a large part of the tree becomes client-rendered, and Next.js warns about it.","sources":[{"title":"Next.js: useSearchParams","url":"https://nextjs.org/docs/app/api-reference/functions/use-search-params"}],"origin":{"topic":"nextjs","level":"middle","index":16}},{"question":"What are parallel routes (`@slot`)?","options":["Named slots that let you render several pages in one layout","Routes processed in multiple server threads","Duplicating a route for A/B testing"],"answer":0,"explanation":"The `@analytics` folder becomes the `analytics` prop of the parent layout. Each slot has its own navigation, loading and error states - handy for dashboards and modals. On a full reload, an inactive slot renders its `default.tsx` (or a 404 if there isn't one).","sources":[{"title":"Next.js: Parallel Routes","url":"https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes"}],"origin":{"topic":"nextjs","level":"middle","index":17}},{"question":"What are intercepting routes `(.)photo/[id]` for?","options":["Showing a route on top of the current page, e.g. in a modal","Intercepting all API requests and logging them on the server","Redirecting an unauthenticated user to the login page"],"answer":0,"explanation":"On client navigation from a feed to `/photo/1`, the interceptor renders the photo in a modal over the feed, and the URL changes. On direct access or page reload, the full `/photo/1` page opens. It's usually combined with a parallel `@modal` slot.","sources":[{"title":"Next.js: Intercepting Routes","url":"https://nextjs.org/docs/app/api-reference/file-conventions/intercepting-routes"},{"title":"Next.js: Parallel Routes","url":"https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes"}],"origin":{"topic":"nextjs","level":"middle","index":18}},{"question":"How do you read a cookie in a Next.js 16 server component?","options":["`const store = await cookies(); store.get('theme')`","`document.cookie` inside the server component","`const theme = cookies().get('theme')` without `await`"],"answer":0,"explanation":"`cookies()` and `headers()` are async: synchronous access was removed in Next.js 16. Using them makes rendering request-dependent. You can set cookies in Server Actions and Route Handlers, but not while rendering a server component.","sources":[{"title":"Next.js: cookies","url":"https://nextjs.org/docs/app/api-reference/functions/cookies"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"middle","index":19}},{"question":"What does `proxy.ts` (formerly middleware) do?","options":["Runs before the request is handled: redirects, rewrites, headers","Proxies all `fetch`es from server components through a shared cache","Swaps React components depending on the device"],"answer":0,"explanation":"Proxy intercepts requests at the network boundary: redirecting unauthenticated users, A/B tests, locales, headers. Its scope is set with `matcher`. Don't use it for heavy logic or as the only authorization check - permissions should also be checked close to the data.","sources":[{"title":"Next.js: Proxy (formerly Middleware)","url":"https://nextjs.org/docs/app/getting-started/proxy"}],"origin":{"topic":"nextjs","level":"middle","index":20}},{"question":"What do you call in a client component to refetch the current route's server components?","options":["`router.refresh()` from `useRouter()`","`window.location.reload()`","`router.push(pathname)` with the same path"],"answer":0,"explanation":"`router.refresh()` makes a new request to the server and re-renders server components while preserving React and browser client state (scroll, typed input). `location.reload()` resets everything. In Server Actions, the counterpart is the `refresh()` function from `next/cache`.","sources":[{"title":"Next.js: useRouter","url":"https://nextjs.org/docs/app/api-reference/functions/use-router"},{"title":"Next.js: refresh","url":"https://nextjs.org/docs/app/api-reference/functions/refresh"}],"origin":{"topic":"nextjs","level":"middle","index":21}},{"question":"How does `global-error.tsx` differ from `error.tsx`?","options":["It catches root layout errors and renders its own `` and ``","It catches errors only during the `next build` command","It's the same as `error.tsx`, but for `route.ts` API routes"],"answer":0,"explanation":"An `error.tsx` at the root won't catch an error in the root layout itself - it lives inside it. `global-error.tsx` replaces the whole document, so it includes its own styles and markup. You can't export metadata from it; use React's `` instead.","sources":[{"title":"Next.js: error.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/error"},{"title":"Next.js: Error Handling","url":"https://nextjs.org/docs/app/getting-started/error-handling"}],"origin":{"topic":"nextjs","level":"middle","index":22}},{"question":"What does `export const dynamic = 'force-dynamic'` do (without Cache Components)?","options":["Forces the route to render on every request, disabling prerendering","Enables hot module reloading in the production build too","Makes all of the route's components client components, like `'use client'`"],"answer":0,"explanation":"It's a route segment config option from the previous caching model. With Cache Components, explicit tools are used instead: `'use cache'` for caching, `<Suspense>` and `connection()` for request-time data. It doesn't turn components into client components.","sources":[{"title":"Next.js: Caching without Cache Components (previous model)","url":"https://nextjs.org/docs/app/guides/caching-without-cache-components"},{"title":"Next.js: Route Segment Config","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config"}],"origin":{"topic":"nextjs","level":"middle","index":23}},{"question":"Which props can be passed from a server page to a client component?","options":["Serializable values and Server Actions; regular functions can't be passed","Any values, including classes and event handlers","Only strings - everything else must be converted to JSON manually"],"answer":0,"explanation":"Props travel over the network in the RSC payload. Objects, arrays, `Date`, `Map`, promises, JSX and Server Functions are supported. You can't pass a regular function (`onClick={() => ...}`) from a server component - declare the handler in the client component.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"},{"title":"react.dev: 'use client'","url":"https://react.dev/reference/rsc/use-client"}],"origin":{"topic":"nextjs","level":"middle","index":24}},{"question":"In the App Router, how do you get data for `generateMetadata` and the page without fetching the API twice via `fetch`?","options":["Do nothing: identical `fetch`es within one render are deduplicated","Save the response to `localStorage` and read it the second time","Use `getStaticProps` next to the `generateMetadata` function"],"answer":0,"explanation":"Request memoization: GET `fetch` requests with the same URL and options within one render run once. For other data sources (ORM, SDK), use React's `cache()`. `getStaticProps` doesn't work in the App Router.","sources":[{"title":"Next.js: Fetching Data","url":"https://nextjs.org/docs/app/getting-started/fetching-data"},{"title":"react.dev: cache","url":"https://react.dev/reference/react/cache"}],"origin":{"topic":"nextjs","level":"middle","index":25}},{"question":"What's the right way to do optimistic UI for a Server Action on the client?","options":["With `useOptimistic` while the action is running","With `router.refresh()` before calling the action","With `revalidatePath` in the client component"],"answer":0,"explanation":"`useOptimistic` shows the expected state immediately and automatically switches back to the real one when the action finishes and fresh data arrives. `revalidatePath` works only on the server. `router.refresh()` before the action won't give instant feedback.","sources":[{"title":"react.dev: useOptimistic","url":"https://react.dev/reference/react/useOptimistic"},{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"}],"origin":{"topic":"nextjs","level":"middle","index":26}},{"question":"What happens with `redirect()` inside `try/catch` in a Server Action?","code":"try {\n await save(data);\n redirect('/done');\n} catch (e) {\n return { error: 'Failed to save' };\n}","options":["`catch` intercepts the redirect's internal exception, so there's no redirect","The redirect works; `catch` runs only if `save` fails","Next.js reports a build error"],"answer":0,"explanation":"`redirect()` and `notFound()` work by throwing special exceptions. A regular `catch` swallows them. The fix is to call `redirect` after the `try/catch` block or rethrow internal errors (`unstable_rethrow(e)`).","sources":[{"title":"Next.js: redirect","url":"https://nextjs.org/docs/app/api-reference/functions/redirect"},{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"}],"origin":{"topic":"nextjs","level":"middle","index":27}},{"question":"How does `<Form>` from `next/form` differ from a plain `<form>` for a search form?","options":["With a string `action`, it performs a client-side navigation with the query","It automatically validates fields against a Zod schema before submitting","It sends data over WebSocket instead of a regular HTTP request"],"answer":0,"explanation":"`<Form action=\"/search\">` turns the fields into `searchParams` and performs an SPA navigation that keeps the shared layout, instead of a full reload. It prefetches shared UI (e.g. `loading.tsx`). Without JS it works like a regular form. With a function in `action`, it behaves like a React form with a Server Action.","sources":[{"title":"Next.js: <Form>","url":"https://nextjs.org/docs/app/api-reference/components/form"}],"origin":{"topic":"nextjs","level":"middle","index":28}},{"question":"What does `generateMetadata` do compared to a static `metadata` export?","options":["Computes metadata dynamically, e.g. from data fetched by `params`","Generates metadata on the client after the page loads","Creates a `sitemap.xml` for all pages"],"answer":0,"explanation":"`export async function generateMetadata({ params }) { const post = await getPost((await params).slug); return { title: post.title } }`. It runs on the server. There's a separate `sitemap.ts` file for sitemaps, and Open Graph images can be generated via `opengraph-image.tsx`.","sources":[{"title":"Next.js: generateMetadata","url":"https://nextjs.org/docs/app/api-reference/functions/generate-metadata"},{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"}],"origin":{"topic":"nextjs","level":"middle","index":29}},{"question":"How do you support multiple languages in the App Router?","options":["An `app/[lang]/...` segment + locale detection in proxy + dictionaries on the server","Enable the `i18n` option in `next.config` - the App Router translates by itself","Create a separate Next.js app for each language"],"answer":0,"explanation":"The App Router doesn't use the built-in `i18n` option from the Pages Router. Typically you create a dynamic `[lang]` segment, redirect the user in proxy based on the `Accept-Language` header and load dictionaries in server components (they don't end up in the bundle). Libraries like next-intl are often used.","sources":[{"title":"Next.js: Internationalization","url":"https://nextjs.org/docs/app/guides/internationalization"},{"title":"Next.js: Proxy (formerly Middleware)","url":"https://nextjs.org/docs/app/getting-started/proxy"}],"origin":{"topic":"nextjs","level":"middle","index":30}},{"question":"How do you return JSON with status 201 from a Route Handler?","options":["`return Response.json(data, { status: 201 })`","`res.status(201).json(data);`","`return { status: 201, body: data };`"],"answer":0,"explanation":"Route Handlers are built on Web APIs: they take a `Request` and return a `Response` (or `NextResponse` with extra features). `res.status().json()` is the Express style used by Pages Router API Routes. A plain object isn't a valid response.","sources":[{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"}],"origin":{"topic":"nextjs","level":"middle","index":31}},{"question":"What is Partial Prerendering (PPR) in Next.js 16?","options":["The page's static shell is sent immediately, and dynamic parts stream in","Prerendering only the first half of the page for speed","A mode where half of the pages are static and half are dynamic"],"answer":0,"explanation":"One route can combine static and dynamic parts: everything that can be prerendered (including `'use cache'`) goes into the shell and is served instantly, while request data streams inside `<Suspense>`. In Next.js 16 it's enabled via `cacheComponents: true` instead of the former experimental flag.","sources":[{"title":"Next.js: cacheComponents","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents"},{"title":"Next.js: Caching (Cache Components)","url":"https://nextjs.org/docs/app/getting-started/caching"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"middle","index":32}},{"question":"How do you prefetch data for client components using TanStack Query in the App Router?","options":["`prefetchQuery` on the server and `HydrationBoundary`","Call `useQuery` directly in an async server component","Put the `QueryClient` instance into the page's `metadata` export"],"answer":0,"explanation":"A server component creates a `QueryClient`, runs `prefetchQuery` and passes the cache state via `<HydrationBoundary state={dehydrate(qc)}>`. A client `useQuery` with the same key gets the data immediately. Hooks don't work in server components.","sources":[{"title":"TanStack Query: Advanced SSR","url":"https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr"},{"title":"Next.js: Fetching Data","url":"https://nextjs.org/docs/app/getting-started/fetching-data"}],"origin":{"topic":"nextjs","level":"middle","index":33}},{"question":"What happens when you import a server component into a `'use client'` file?","options":["It becomes a client component, and server code breaks or leaks","It stays a server component: Next.js splits the modules at build time","The import is ignored, and the component doesn't render"],"answer":0,"explanation":"Everything imported from a client module goes into the client bundle. If the component accessed the DB, the build fails (or worse, the code reaches the browser). Pass a server component to a client one as `children` or another prop from a server parent.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"},{"title":"react.dev: 'use client'","url":"https://react.dev/reference/rsc/use-client"}],"origin":{"topic":"nextjs","level":"middle","index":34}},{"question":"How do you run code (e.g. analytics) after the response is sent, without delaying the user?","options":["Use `after()` from `next/server`","Start a promise without `await` in a server component","Call `setTimeout` in a server component"],"answer":0,"explanation":"`after(() => log(...))` schedules work after the response finishes (in server components, Server Actions, Route Handlers, proxy). A \"dangling\" promise in a serverless environment can be cut off when the function ends, and its errors get lost.","sources":[{"title":"Next.js: after","url":"https://nextjs.org/docs/app/api-reference/functions/after"}],"origin":{"topic":"nextjs","level":"middle","index":35}},{"question":"In Next.js, how do you send only part of the DB data to the client so nothing extra (like a password hash) leaks?","options":["Return DTOs with only the needed fields from the data access layer","Pass the whole user object: React hides the extra fields","Delete the extra fields in the client component after receiving them"],"answer":0,"explanation":"Everything in a client component's props is serialized into the HTML and RSC payload and visible in DevTools. A Data Access Layer that checks permissions and returns minimal DTOs is recommended. You can also use the taint API to forbid passing certain objects to the client.","sources":[{"title":"Next.js: Data Security","url":"https://nextjs.org/docs/app/guides/data-security"}],"origin":{"topic":"nextjs","level":"middle","index":36}},{"question":"How does `revalidatePath('/blog/[slug]', 'page')` differ from `revalidatePath('/blog/my-post')`?","options":["The first covers all pages of the pattern, the second one specific path","No difference: the second argument `'page'` is simply ignored","The first invalidates only the layout, the second only the page"],"answer":0,"explanation":"If you pass a pattern with a dynamic segment, you must specify the type `'page'` or `'layout'`, and invalidation affects all paths matching the pattern. A specific path invalidates one page. `revalidatePath('/', 'layout')` resets the whole app.","sources":[{"title":"Next.js: revalidatePath","url":"https://nextjs.org/docs/app/api-reference/functions/revalidatePath"}],"origin":{"topic":"nextjs","level":"middle","index":37}},{"question":"Where should you store a secret API key used in a server component?","options":["In an environment variable without the `NEXT_PUBLIC_` prefix","In `NEXT_PUBLIC_API_KEY` so it's available everywhere","Right in the component's code - it's a server component anyway"],"answer":0,"explanation":"Variables without the prefix are available only on the server. `NEXT_PUBLIC_*` variables are inlined into the client bundle and visible to everyone. Hardcoding ends up in the repository. `.env*.local` files aren't committed, and in production the values are set on the platform.","sources":[{"title":"Next.js: Environment Variables","url":"https://nextjs.org/docs/app/guides/environment-variables"},{"title":"Next.js: Data Security","url":"https://nextjs.org/docs/app/guides/data-security"}],"origin":{"topic":"nextjs","level":"middle","index":38}},{"question":"What does `connection()` from `next/server` do?","options":["Signals that rendering from here on must wait for an actual request","Opens a database connection pool for the current request","Checks that the user has an internet connection"],"answer":0,"explanation":"It's needed when a component uses values that mustn't be computed during prerendering but doesn't access `cookies()` or `headers()`: for example, `Math.random()` or the current time. With Cache Components, such a component goes inside `<Suspense>`.","sources":[{"title":"Next.js: connection","url":"https://nextjs.org/docs/app/api-reference/functions/connection"}],"origin":{"topic":"nextjs","level":"middle","index":39}},{"question":"Why is `useFormStatus` handy in forms with Server Actions?","options":["It gives the parent form's `pending` state so you can disable the button","It returns the validation result of each form field","It lets you submit the form programmatically, without a button or click"],"answer":0,"explanation":"The hook is called in a component inside `<form>` (usually the submit button): `const { pending } = useFormStatus()`. This lets you build a reusable `<SubmitButton>`. The action's result and errors are held by `useActionState`.","sources":[{"title":"react.dev: useFormStatus","url":"https://react.dev/reference/react-dom/hooks/useFormStatus"},{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"}],"origin":{"topic":"nextjs","level":"middle","index":40}},{"question":"Which file sets the fallback for a parallel route slot on a full page reload?","options":["`default.tsx`","`fallback.tsx`","`slot.tsx`"],"answer":0,"explanation":"During soft navigation, Next.js remembers the active state of slots. After a reload, it can't restore the state of slots that don't match the URL, so it renders their `default.tsx` (or a 404 if the file is missing). For a modal, `@modal/default.tsx` usually returns `null`.","sources":[{"title":"Next.js: Parallel Routes","url":"https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes"}],"origin":{"topic":"nextjs","level":"middle","index":41}},{"question":"How does a static route differ from a dynamic one in terms of rendering?","options":["Static - at build time, dynamic - on every request","A static route can't contain any JavaScript","Dynamic means any route with a `[param]` segment in its path"],"answer":0,"explanation":"A route becomes dynamic when it uses request data: `cookies()`, `headers()`, `searchParams`, uncached requests. A `[slug]` segment by itself doesn't do that - it can be prerendered via `generateStaticParams`. With Cache Components, the boundary runs inside the page (PPR).","sources":[{"title":"Next.js: Rendering Philosophy","url":"https://nextjs.org/docs/app/guides/rendering-philosophy"},{"title":"Next.js: Caching (Cache Components)","url":"https://nextjs.org/docs/app/getting-started/caching"}],"origin":{"topic":"nextjs","level":"middle","index":42}},{"question":"Where is the right place to check authorization in the App Router?","options":["Close to the data: in the Data Access Layer, Server Actions and Route Handlers","Only in `proxy.ts` - after it, all routes are considered protected","Only in a client component, by hiding buttons from guests"],"answer":0,"explanation":"Proxy is fine for optimistic checks and redirects but shouldn't be the only protection: Server Actions are called directly, and layouts don't re-render on navigation. Check the session and permissions reliably where data is read and changed. Hiding buttons on the client isn't security.","sources":[{"title":"Next.js: Authentication","url":"https://nextjs.org/docs/app/guides/authentication"},{"title":"Next.js: Data Security","url":"https://nextjs.org/docs/app/guides/data-security"}],"origin":{"topic":"nextjs","level":"middle","index":43}},{"question":"How do you limit which paths `proxy.ts` runs on?","options":["Export a `config` with a `matcher`","Create a separate proxy in each route folder","List the paths in the `proxyRoutes` section of `next.config`"],"answer":0,"explanation":"`export const config = { matcher: ['/dashboard/:path*'] }` - proxy runs only for matching paths. Static files and `_next` are usually excluded to save resources. There's one proxy per project, located at the root (or in `src`).","sources":[{"title":"Next.js: Proxy (formerly Middleware)","url":"https://nextjs.org/docs/app/getting-started/proxy"}],"origin":{"topic":"nextjs","level":"middle","index":44}},{"question":"What is `opengraph-image.tsx` useful for?","options":["Generating the route's OG image from JSX at build time or on request","Optimizing all images on the page for social media sharing","Adding a watermark to all of the route's images"],"answer":0,"explanation":"By convention the file returns an `ImageResponse` with JSX markup - Next.js turns it into a PNG and adds the necessary `<meta>` tags. Handy for article previews with a title. In Next.js 16, `params` in such files is a promise too.","sources":[{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"middle","index":45}},{"question":"Where does a client component's code run on the first page load?","options":["Both on the server (for HTML) and in the browser (hydration)","Only in the browser; it's skipped on the server","Only on the server; the browser gets ready HTML without JS"],"answer":0,"explanation":"`'use client'` doesn't mean \"client only\": the component is prerendered to HTML on the server and then hydrated. That's why you can't access `window` during render without checks - use effects or `next/dynamic` with `ssr: false`.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"},{"title":"react.dev: 'use client'","url":"https://react.dev/reference/rsc/use-client"}],"origin":{"topic":"nextjs","level":"middle","index":46}},{"question":"How is page data updated after an action if `revalidateTag(tag, 'max')` is used?","options":["The visitor gets the old data, and fresh data is generated in the background","The page instantly reloads for all users","The data updates only after the project is rebuilt"],"answer":0,"explanation":"The `'max'` profile gives stale-while-revalidate semantics: the entry is marked stale, the first request gets the old version and triggers regeneration. If the author of the change should see the result immediately, use `updateTag` in a Server Action.","sources":[{"title":"Next.js: revalidateTag","url":"https://nextjs.org/docs/app/api-reference/functions/revalidateTag"},{"title":"Next.js: updateTag","url":"https://nextjs.org/docs/app/api-reference/functions/updateTag"}],"origin":{"topic":"nextjs","level":"middle","index":47}},{"question":"What does `staleTimes` in `next.config` control?","options":["How long segments live in the client router cache","How long `fetch` responses live in the server cache","The timeout for generating static pages at build time"],"answer":0,"explanation":"The client router cache stores the RSC payload of visited and prefetched segments so back/forward navigation and repeat visits are instant. `staleTimes` sets how long this data is considered fresh for dynamic and static pages. The server data cache is configured separately.","sources":[{"title":"Next.js: staleTimes","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/staleTimes"},{"title":"Next.js: Prefetching","url":"https://nextjs.org/docs/app/guides/prefetching"}],"origin":{"topic":"nextjs","level":"middle","index":48}},{"question":"How do you return validation errors to a form from a Server Action?","options":["Return an errors object and read it via `useActionState`","Throw an exception - it appears next to the field","Call `alert()` on the server"],"answer":0,"explanation":"Expected errors (an invalid email) are returned as data: `return { errors: { email: 'Invalid address' } }`. The form renders them via the `useActionState` state. Exceptions are reserved for unexpected failures - `error.tsx` catches them.","sources":[{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"},{"title":"Next.js: Error Handling","url":"https://nextjs.org/docs/app/getting-started/error-handling"},{"title":"react.dev: useActionState","url":"https://react.dev/reference/react/useActionState"}],"origin":{"topic":"nextjs","level":"middle","index":49}},{"question":"How can a layout highlight the active tab among its child segments?","code":"'use client'\nconst segment = useSelectedLayoutSegment() // 'settings' on /dashboard/settings","options":["Use `useSelectedLayoutSegment()` in a client component rendered by the layout","Read the `params` prop of the layout - it contains child segments","Layouts can't know which child page is active"],"answer":0,"explanation":"Layouts don't re-render on navigation and don't get the child's path. The hook returns the active segment one level below the layout (`useSelectedLayoutSegments` returns all of them).","sources":[{"title":"Next.js: useSelectedLayoutSegment","url":"https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment"}],"origin":{"topic":"nextjs","level":"middle","index":50}},{"question":"What happens in Next.js 16 if a parallel route slot `@modal` has no `default.tsx`?","options":["The build fails - every parallel slot now needs an explicit `default.js`","The slot silently renders nothing","Next.js generates a default that renders `notFound()`"],"answer":0,"explanation":"`default.tsx` is rendered when Next.js can't recover the slot's active state after a full page load. Return `null` from it if the slot should be empty.","sources":[{"title":"Next.js: default.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/default"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"middle","index":51}},{"question":"How does a rewrite differ from a redirect in `next.config.ts`?","options":["A rewrite serves another path's content while the browser URL stays the same; a redirect sends the browser to a new URL","They are the same, but rewrites are permanent","Rewrites work only for external URLs"],"answer":0,"explanation":"Rewrites act as a proxy, e.g. mapping `/api/:path*` to another backend or an old app during migration. The user never sees the destination URL.","sources":[{"title":"Next.js: rewrites (next.config)","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/rewrites"},{"title":"Next.js: redirects (next.config)","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/redirects"}],"origin":{"topic":"nextjs","level":"middle","index":52}},{"question":"Where can you add security headers like `X-Frame-Options` to all responses without touching pages?","code":"async headers() {\n return [{ source: '/(.*)', headers: [{ key: 'X-Frame-Options', value: 'DENY' }] }]\n}","options":["In `headers()` in `next.config.ts` (or in `proxy.ts` for dynamic values)","Only via a `<meta>` tag in the root layout","In `metadata.headers`"],"answer":0,"explanation":"Config headers apply by path pattern. Headers that depend on the request, like a CSP nonce, are set in `proxy.ts`.","sources":[{"title":"Next.js: headers (next.config)","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/headers"},{"title":"Next.js: Content Security Policy","url":"https://nextjs.org/docs/app/guides/content-security-policy"}],"origin":{"topic":"nextjs","level":"middle","index":53}},{"question":"A form uploads a 5 MB file via a Server Action and fails. What's the likely cause?","options":["Server Action request bodies are limited to 1 MB by default; raise `serverActions.bodySizeLimit` or upload directly to storage","Server Actions can't accept `FormData`","Files must be base64-encoded first"],"answer":0,"explanation":"The limit protects the server from large-payload attacks. For big files, a signed upload URL to object storage avoids sending the bytes through your server.","sources":[{"title":"Next.js: serverActions config","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions"}],"origin":{"topic":"nextjs","level":"middle","index":54}},{"question":"What does `redirect()` in a Server Action do for a form submitted before JavaScript loaded?","options":["It responds with a 303 redirect, so the browser follows it with a GET","It does nothing until hydration","It returns a 500 error"],"answer":0,"explanation":"When JavaScript is available, `redirect` performs a client-side navigation. The 303 status keeps progressive enhancement working without re-posting the form.","sources":[{"title":"Next.js: redirect","url":"https://nextjs.org/docs/app/api-reference/functions/redirect"},{"title":"Next.js: Forms","url":"https://nextjs.org/docs/app/guides/forms"}],"origin":{"topic":"nextjs","level":"middle","index":55}},{"question":"Why can't you call `(await cookies()).set(...)` while rendering a server component?","options":["Cookies can be set only in Server Actions, Route Handlers or `proxy.ts` - headers may already be streaming during render","`cookies()` is read-only everywhere","Setting cookies requires a client component"],"answer":0,"explanation":"HTTP headers must be sent before the body. Render may stream, so Next.js only allows writing cookies where the response is fully controlled.","sources":[{"title":"Next.js: cookies","url":"https://nextjs.org/docs/app/api-reference/functions/cookies"}],"origin":{"topic":"nextjs","level":"middle","index":56}},{"question":"What is `output: 'standalone'` useful for?","options":["Building a minimal server folder with only the needed `node_modules`, e.g. for a small Docker image","Exporting static HTML files","Running Next.js without Node.js"],"answer":0,"explanation":"The build traces imported files and copies them to `.next/standalone` with a `server.js`. `public` and `.next/static` must be copied separately or served from a CDN.","sources":[{"title":"Next.js: output","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/output"},{"title":"Next.js: Self-Hosting","url":"https://nextjs.org/docs/app/guides/self-hosting"}],"origin":{"topic":"nextjs","level":"middle","index":57}},{"question":"How do you generate a dynamic Open Graph image (e.g. with the post title) in code?","code":"// app/blog/[slug]/opengraph-image.tsx\nimport { ImageResponse } from 'next/og'\n\nexport default async function Image({ params }) {\n const { slug } = await params\n return new ImageResponse(<div style={{ fontSize: 64 }}>{slug}</div>)\n}","options":["Return `ImageResponse` from `next/og` in an `opengraph-image.tsx` file","Render the page in a headless browser and take a screenshot","Use `next/image` with `og` prop"],"answer":0,"explanation":"`ImageResponse` turns JSX and a subset of CSS (flexbox) into a PNG. By default the image is generated at build time and cached unless it uses request-time APIs.","sources":[{"title":"Next.js: ImageResponse","url":"https://nextjs.org/docs/app/api-reference/functions/image-response"},{"title":"Next.js: opengraph-image and twitter-image","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image"}],"origin":{"topic":"nextjs","level":"middle","index":58}},{"question":"How do you split a sitemap of 200,000 product URLs?","options":["Use `generateSitemaps` to return several sitemap ids, and the `sitemap` function builds one file per id","One sitemap can hold unlimited URLs","Put every URL into `robots.txt`"],"answer":0,"explanation":"Search engines limit a sitemap to 50,000 URLs. Each id produces a separate URL like `/product/sitemap/0.xml`; in Next.js 16 the `id` argument is a Promise.","sources":[{"title":"Next.js: generateSitemaps","url":"https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps"},{"title":"Next.js: sitemap.xml","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap"}],"origin":{"topic":"nextjs","level":"middle","index":59}},{"question":"What is `instrumentation-client.ts` for?","options":["Running client-side monitoring or analytics setup before the app becomes interactive","Registering OpenTelemetry on the server","Configuring the client router's cache"],"answer":0,"explanation":"Put it in the project root (or `src`). It needs no exports - the code simply runs early in the browser, e.g. to init error tracking.","sources":[{"title":"Next.js: instrumentation-client.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client"},{"title":"Next.js: Instrumentation","url":"https://nextjs.org/docs/app/guides/instrumentation"}],"origin":{"topic":"nextjs","level":"middle","index":60}},{"question":"What does `'use cache: private'` allow?","options":["Caching a function that reads `cookies()` or `headers()`; the result isn't stored in a server cache across requests","Sharing cached data between all users","Storing the cache in a private Redis instance"],"answer":0,"explanation":"Results can be reused within a request and kept in the browser's router cache for the `stale` time. Use it for per-user data you want to prefetch.","sources":[{"title":"Next.js: 'use cache: private'","url":"https://nextjs.org/docs/app/api-reference/directives/use-cache-private"},{"title":"Next.js: 'use cache'","url":"https://nextjs.org/docs/app/api-reference/directives/use-cache"}],"origin":{"topic":"nextjs","level":"middle","index":61}},{"question":"With Cache Components, how do you keep `new Date()` out of the static shell?","code":"async function CurrentTime() {\n await io()\n return <p>{new Date().toISOString()}</p>\n}","options":["Call `await io()` from `next/cache` before reading it, inside a `<Suspense>` boundary","Wrap it in `'use cache'`","Use `Date.now()` instead"],"answer":0,"explanation":"`'use cache'` captures the value once for everyone. `io()` suspends during prerendering; unlike `connection()`, it doesn't block prefetching.","sources":[{"title":"Next.js: io","url":"https://nextjs.org/docs/app/api-reference/functions/io"},{"title":"Next.js: connection","url":"https://nextjs.org/docs/app/api-reference/functions/connection"}],"origin":{"topic":"nextjs","level":"middle","index":62}},{"question":"How can a deeply nested server component read the `[lang]` segment of the root layout without prop drilling?","code":"import { lang } from 'next/root-params'\n\nconst current = await lang()","options":["Import the generated getter from `next/root-params`","Call `useParams()` in the server component","Store it in a global variable in the root layout"],"answer":0,"explanation":"Root params are dynamic segments above the root layout. The getters work in server components but not in client components, Server Actions or Route Handlers.","sources":[{"title":"Next.js: next/root-params","url":"https://nextjs.org/docs/app/api-reference/functions/next-root-params"}],"origin":{"topic":"nextjs","level":"middle","index":63}},{"question":"What is `catchError` from `next/error` for?","options":["Creating a component-level error boundary that works with `redirect()`/`notFound()` and offers `retry()`","Logging server errors to a file","Catching errors in `proxy.ts`"],"answer":0,"explanation":"It's a programmatic alternative to `error.tsx` that can wrap any part of the tree. It doesn't swallow Next.js control-flow errors and clears on navigation.","sources":[{"title":"Next.js: catchError","url":"https://nextjs.org/docs/app/api-reference/functions/catchError"},{"title":"Next.js: Error Handling","url":"https://nextjs.org/docs/app/getting-started/error-handling"}],"origin":{"topic":"nextjs","level":"middle","index":64}},{"question":"A monorepo package `@acme/ui` ships untranspiled TypeScript. How do you use it in a Next.js app?","options":["Add it to `transpilePackages` in `next.config.ts`","Copy its files into `app/`","It's impossible; publish it as compiled JS first"],"answer":0,"explanation":"`transpilePackages` lets Next.js compile dependencies from local packages or `node_modules`, replacing the old `next-transpile-modules` plugin.","sources":[{"title":"Next.js: transpilePackages","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/transpilePackages"}],"origin":{"topic":"nextjs","level":"middle","index":65}},{"question":"How do you stream a response gradually from a Route Handler (e.g. AI tokens)?","code":"export async function GET() {\n const stream = new ReadableStream({\n async start(controller) {\n for await (const chunk of tokens()) controller.enqueue(chunk)\n controller.close()\n },\n })\n return new Response(stream)\n}","options":["Return a `Response` whose body is a `ReadableStream`","Call `res.write()` like in Express","Streaming works only with the Edge runtime"],"answer":0,"explanation":"Route Handlers use the Web `Response` API, so any stream works on the Node.js runtime too. Add `text/event-stream` headers for SSE.","sources":[{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"},{"title":"MDN: ReadableStream","url":"https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream"}],"origin":{"topic":"nextjs","level":"middle","index":66}},{"question":"What does `export const maxDuration = 60` do in a page or Route Handler?","options":["Sets the maximum execution time (in seconds) for that route's server function on platforms that support it","Caches the route for 60 seconds","Delays the response by 60 seconds"],"answer":0,"explanation":"It's a route segment config read by deployment platforms. Server Actions inherit it from the page that uses them.","sources":[{"title":"Next.js: maxDuration","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/maxDuration"},{"title":"Next.js: Route Segment Config","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config"}],"origin":{"topic":"nextjs","level":"middle","index":67}},{"question":"With `cacheComponents: true`, why does `export const revalidate = 60` in a page fail?","options":["`revalidate`, `dynamic` and `fetchCache` segment configs are removed with Cache Components; use `'use cache'` + `cacheLife`","`revalidate` must be a string","It works only in layouts"],"answer":0,"explanation":"Cache Components move caching decisions from the route to individual functions and components, so route-wide flags no longer apply.","sources":[{"title":"Next.js: Route Segment Config","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config"},{"title":"Next.js: cacheLife","url":"https://nextjs.org/docs/app/api-reference/functions/cacheLife"},{"title":"Next.js: cacheComponents","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents"}],"origin":{"topic":"nextjs","level":"middle","index":68}},{"question":"What is the recommended way to test an `async` server component?","options":["End-to-end tests (e.g. Playwright), since unit tools don't fully support async server components yet","Render it with `@testing-library/react` like any component","Snapshot its JSX with Jest"],"answer":0,"explanation":"Synchronous server and client components can be unit-tested with Vitest or Jest. Data functions can be tested separately as plain async code.","sources":[{"title":"Next.js: Testing","url":"https://nextjs.org/docs/app/guides/testing"},{"title":"Playwright","url":"https://playwright.dev/docs/intro"}],"origin":{"topic":"nextjs","level":"middle","index":69}},{"question":"How do you call a Server Action from a button's `onClick` (not a form) and show pending state?","code":"const [isPending, startTransition] = useTransition()\n<button onClick={() => startTransition(() => likePost(id))}>","options":["Wrap the call in `startTransition` from `useTransition`","Server Actions can only be used in `<form action>`","Call it inside `useEffect`"],"answer":0,"explanation":"The transition gives `isPending` and lets Next.js update the UI with revalidated data from the action's response.","sources":[{"title":"Next.js: Mutating Data (Server Functions)","url":"https://nextjs.org/docs/app/getting-started/mutating-data"},{"title":"react.dev: useTransition","url":"https://react.dev/reference/react/useTransition"}],"origin":{"topic":"nextjs","level":"middle","index":70}},{"question":"With Cache Components, why does a form keep its typed text after navigating away and pressing Back?","options":["Next.js hides previous routes with React `<Activity>` instead of unmounting, preserving state and DOM","The browser restores form values from `localStorage`","Next.js serializes component state into the URL"],"answer":0,"explanation":"Up to 3 routes are preserved. Transient UI like open dropdowns should be reset in an effect cleanup, or keyed by `bfcacheId`.","sources":[{"title":"Next.js: Preserving UI state","url":"https://nextjs.org/docs/app/guides/preserving-ui-state"},{"title":"react.dev: <Activity>","url":"https://react.dev/reference/react/Activity"}],"origin":{"topic":"nextjs","level":"middle","index":71}},{"question":"When does `prefetch={false}` on `<Link>` make sense?","options":["For long lists of rarely-clicked links (e.g. footer or table rows) to avoid many prefetch requests","Always, to save bandwidth","For links to the current page"],"answer":0,"explanation":"Without prefetching, the route loads on click (hover may still help with a custom handler). `useLinkStatus` can show pending state for such links.","sources":[{"title":"Next.js: <Link>","url":"https://nextjs.org/docs/app/api-reference/components/link"},{"title":"Next.js: Prefetching","url":"https://nextjs.org/docs/app/guides/prefetching"}],"origin":{"topic":"nextjs","level":"middle","index":72}},{"question":"What happens when navigating between two routes that use different root layouts (via route groups)?","options":["A full page load happens instead of client-side navigation","Both root layouts are rendered nested","The build fails"],"answer":0,"explanation":"Each root layout owns its own `<html>` and `<body>`, so the client can't keep the shared tree. Use multiple root layouts for truly separate sections.","sources":[{"title":"Next.js: Route Groups","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-groups"}],"origin":{"topic":"nextjs","level":"middle","index":73}},{"question":"A Server Action works locally but fails behind a reverse proxy with a different host. Which option helps?","options":["`serverActions.allowedOrigins` with the proxy's domain","`images.remotePatterns`","`basePath`"],"answer":0,"explanation":"Next.js compares the `Origin` and `Host` headers to block CSRF. Trusted extra origins must be listed explicitly.","sources":[{"title":"Next.js: serverActions config","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions"}],"origin":{"topic":"nextjs","level":"middle","index":74}}]}],"$L33"] </article></body></html>