← All topics

Next.js Middle interview questions and answers

75 questions for a Next.js (Middle) interview - with correct answers, explanations and links to the docs.

Take this quiz
  1. 1.What is a Server Function (Server Action) in Next.js?
  2. 2.What does <form action={createPost}> with a Server Action give you compared to onSubmit + fetch?
  3. 3.What does revalidatePath('/blog') do after a mutation?
  4. 4.How does updateTag differ from revalidateTag in Next.js 16?
  5. 5.Are fetch requests in server components cached by default (Next.js 15+, without Cache Components)?
  6. 6.What does the 'use cache' directive do?
  7. 7.Why can't you call cookies() inside a function with 'use cache'?
  8. 8.Which cacheLife profile applies if you don't specify one in 'use cache'?
  9. 9.What is cacheTag('products') inside a cached function for?
  10. 10.What does loading.tsx do during client navigation to a segment with slow data?
  11. 11.What does generateStaticParams do?
  12. 12.How do you show a page with slow data in Next.js without delaying the whole page?
  13. 13.How do you avoid a request waterfall if a component needs independent getUser() and getPosts()?
  14. 14.How do you avoid a double DB query if both generateMetadata and the page call getUser(id)?
  15. 15.How do you guarantee a module with secrets never ends up in the client bundle?
  16. 16.Can you use next/dynamic with ssr: false in a server component?
  17. 17.Why wrap a component using useSearchParams() in <Suspense>?
  18. 18.What are parallel routes (@slot)?
  19. 19.What are intercepting routes (.)photo/[id] for?
  20. 20.How do you read a cookie in a Next.js 16 server component?
  21. 21.What does proxy.ts (formerly middleware) do?
  22. 22.What do you call in a client component to refetch the current route's server components?
  23. 23.How does global-error.tsx differ from error.tsx?
  24. 24.What does export const dynamic = 'force-dynamic' do (without Cache Components)?
  25. 25.Which props can be passed from a server page to a client component?
  26. 26.In the App Router, how do you get data for generateMetadata and the page without fetching the API twice via fetch?
  27. 27.What's the right way to do optimistic UI for a Server Action on the client?
  28. 28.What happens with redirect() inside try/catch in a Server Action?
  29. 29.How does <Form> from next/form differ from a plain <form> for a search form?
  30. 30.What does generateMetadata do compared to a static metadata export?
  31. 31.How do you support multiple languages in the App Router?
  32. 32.How do you return JSON with status 201 from a Route Handler?
  33. 33.What is Partial Prerendering (PPR) in Next.js 16?
  34. 34.How do you prefetch data for client components using TanStack Query in the App Router?
  35. 35.What happens when you import a server component into a 'use client' file?
  36. 36.How do you run code (e.g. analytics) after the response is sent, without delaying the user?
  37. 37.In Next.js, how do you send only part of the DB data to the client so nothing extra (like a password hash) leaks?
  38. 38.How does revalidatePath('/blog/[slug]', 'page') differ from revalidatePath('/blog/my-post')?
  39. 39.Where should you store a secret API key used in a server component?
  40. 40.What does connection() from next/server do?
  41. 41.Why is useFormStatus handy in forms with Server Actions?
  42. 42.Which file sets the fallback for a parallel route slot on a full page reload?
  43. 43.How does a static route differ from a dynamic one in terms of rendering?
  44. 44.Where is the right place to check authorization in the App Router?
  45. 45.How do you limit which paths proxy.ts runs on?
  46. 46.What is opengraph-image.tsx useful for?
  47. 47.Where does a client component's code run on the first page load?
  48. 48.How is page data updated after an action if revalidateTag(tag, 'max') is used?
  49. 49.What does staleTimes in next.config control?
  50. 50.How do you return validation errors to a form from a Server Action?
  51. 51.How can a layout highlight the active tab among its child segments?
  52. 52.What happens in Next.js 16 if a parallel route slot @modal has no default.tsx?
  53. 53.How does a rewrite differ from a redirect in next.config.ts?
  54. 54.Where can you add security headers like X-Frame-Options to all responses without touching pages?
  55. 55.A form uploads a 5 MB file via a Server Action and fails. What's the likely cause?
  56. 56.What does redirect() in a Server Action do for a form submitted before JavaScript loaded?
  57. 57.Why can't you call (await cookies()).set(...) while rendering a server component?
  58. 58.What is output: 'standalone' useful for?
  59. 59.How do you generate a dynamic Open Graph image (e.g. with the post title) in code?
  60. 60.How do you split a sitemap of 200,000 product URLs?
  61. 61.What is instrumentation-client.ts for?
  62. 62.What does 'use cache: private' allow?
  63. 63.With Cache Components, how do you keep new Date() out of the static shell?
  64. 64.How can a deeply nested server component read the [lang] segment of the root layout without prop drilling?
  65. 65.What is catchError from next/error for?
  66. 66.A monorepo package @acme/ui ships untranspiled TypeScript. How do you use it in a Next.js app?
  67. 67.How do you stream a response gradually from a Route Handler (e.g. AI tokens)?
  68. 68.What does export const maxDuration = 60 do in a page or Route Handler?
  69. 69.With cacheComponents: true, why does export const revalidate = 60 in a page fail?
  70. 70.What is the recommended way to test an async server component?
  71. 71.How do you call a Server Action from a button's onClick (not a form) and show pending state?
  72. 72.With Cache Components, why does a form keep its typed text after navigating away and pressing Back?
  73. 73.When does prefetch={false} on <Link> make sense?
  74. 74.What happens when navigating between two routes that use different root layouts (via route groups)?
  75. 75.A Server Action works locally but fails behind a reverse proxy with a different host. Which option helps?