Next.js Interview Questions
Master Server Components, caching strategies, routing, and Next.js 14+ architecture. Prepare with these 1 real-world questions covering beginner to advanced scenarios.
What is the difference between Server Components and Client Components?
Simple Answer
Server Components render on the server and send zero JavaScript to the browser, making the page load much faster. Client Components render on the browser and are required whenever you need interactivity (like `onClick`) or state (`useState`).
Detailed Answer
In Next.js 13+ (App Router), all components are Server Components by default. They can directly query databases and keep sensitive API keys secure. To use a Client Component, you must add the `'use client'` directive at the top of the file. Client Components add to the client-side JavaScript bundle size, so they should be pushed down the component tree as far as possible (e.g., wrap a button in a Client Component, not the whole page).
Interview Tip
Always emphasize that Server Components are the default, and Client Components should only be used at the 'leaves' of the component tree to minimize JS payload.
Common Mistake
Adding 'use client' at the top of `page.tsx`, effectively disabling all Server Component benefits for the entire route.
Real World Example
A blog post page. The article text, title, and comments list can be Server Components (fetched directly from the DB). The 'Like' button at the bottom needs an `onClick` handler, so it must be extracted into a small Client Component.
Test Your Next.js Knowledge
Take this quick interactive quiz to see if you retained the key concepts.
Next.js Mastery Quiz
Question 1 of 1What is the difference between Server Components and Client Components?
Keep Building Your Next.js Skills
Interview prep works best when combined with hands-on practice. Use these resources to deepen your understanding and build portfolio projects.