Next.js interview questions test server components, routing, data fetching, static generation, and the App Router. As more teams ship production apps on Next.js, interviewers expect you to know when code runs on the server, when it runs on the client, and why it matters. This page covers 40 real Next.js interview questions with answers across four formats: multiple choice, written answers, spoken responses, and live coding challenges, the same mix used in modern technical interviews.
Practice each question in your browser with no signup required. Answers stay hidden until you attempt the question: type, speak, or code your response first, then compare it against the model answer. Questions range from fundamentals for your first developer job to scenario-based questions for senior roles, so you can find the gaps in your knowledge before the real interview.
40 questions with answersLast updated: Oct 19, 2026
Choose a question. Pick any of the 40 questions. They mix multiple choice, written, spoken, and coding, the same mix a real interviewer uses.
Attempt your answer. Select a multiple-choice option, type your written response, record a spoken answer, or write code in the editor.
Reveal the model answer. Once you have attempted the question, the model answer unlocks so you can compare it with yours.
Move to the next question. Track how many questions you have attempted with the progress bar at the top of the page.
Take a mock interview. When you are ready, try a full mock technical interview on Plaicer with AI-driven follow-up questions.
Next.js Interview Questions and Answers
0 of 40 attempted
1Multiple choice
How would you describe Next.js and what problems does it solve for React applications?
Attempt the question first to reveal the answer.
Answer
Next.js extends React with server-side rendering, static generation, API routes, image optimization, and file-based routing. It solves performance, SEO, and developer experience challenges in production applications.
2Written answer
Describe Next.js purpose, key features, and how it extends React capabilities
Attempt the question first to reveal the answer.
Answer
Next.js is a React framework providing production-ready features. Key features: Server-Side Rendering generates HTML on server for each request, enabling SEO and fast initial loads. Static Generation pre-renders at build time for performance. Incremental Static Regeneration updates static pages without full rebuilds. File-based routing eliminates manual route configuration. API routes enable backend functionality. Image optimization lazy-loads and serves responsive images. Built-in performance monitoring and optimizations. It solves React challenges: SEO for SPAs, bundle size, build configuration complexity. Modern Next.js uses App Router with Server Components.
3Spoken answer
Walk through how you would decide whether to use SSG, SSR, or ISR for a blog application
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
For a blog, I evaluated: blog posts change weekly, need SEO, initial load important. I chose SSG with getStaticProps for main blog listing. Individual post pages used getStaticPaths to pre-render for known posts, fallback to on-demand rendering for new ones. Comments used client-side fetch for real-time updates. ISR with revalidate 604800 seconds regenerated weekly without rebuilds. This gave fast static performance with fresh content.
4Coding
Create a server component that fetches data and renders product listings
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
async function ProductList() { const products = await fetch url; return div containing product details and images }
5Multiple choice
Explain server-side rendering and how it improves performance and SEO
Attempt the question first to reveal the answer.
Answer
SSR generates complete HTML on the server before sending to browsers. Search engines can crawl fully rendered content. Initial page load shows content immediately instead of waiting for JavaScript. Trade-off: server load and slower response times.
6Written answer
Explain how SSR works, its benefits for SEO and initial load, and performance tradeoffs
Attempt the question first to reveal the answer.
Answer
Server-Side Rendering generates complete HTML on the server for each request. When user visits page, server renders React components and sends HTML. Browser receives fully rendered page, displays content immediately without waiting for JavaScript download and execution. Search engines crawl fully rendered content, improving SEO and indexing. Initial page load is fast: users see content before interactive. Trade-offs: server CPU load increases with visitors, response time per request is slower than static files, memory usage per server increases. Best for content that changes frequently or requires authentication.
7Spoken answer
Describe a situation where you used Server Components to improve performance
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
The product listing was fetching on client, blocking rendering. I converted to Server Component in App Router. Fetched data on server, rendered HTML including product details. No client-side data fetching, no loading states needed, faster First Contentful Paint. SEO improved because search engines see full content. Bundle size smaller without data-fetching JavaScript.
8Coding
Write an API route that accepts POST requests and handles form submissions
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
export async function POST request response { const data = await request.json; validate data; write to database; return response.json success status 200 }
9Multiple choice
Describe static site generation and when to use it over server-side rendering
Attempt the question first to reveal the answer.
Answer
SSG generates static HTML at build time. Pages are cached and served instantly from CDN. Use for content that changes rarely: blog posts, marketing pages. Revalidation updates pages without full rebuilds.
10Written answer
Describe SSG, when data is fetched with getStaticProps, and revalidation options
Attempt the question first to reveal the answer.
Answer
Static Site Generation pre-renders pages at build time. getStaticProps runs during build, fetches data, passes to component. Pages are generated as static HTML, served instantly from cache or CDN. Revalidation options: revalidate time in seconds re-generates pages in background after timeout, on-demand revalidation manually triggers regeneration via API. Dynamic routes use getStaticPaths to generate for multiple parameter values. Best for content that changes rarely: blog posts, documentation, marketing pages.
11Spoken answer
Explain how you would implement authentication in Next.js using middleware
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
I created middleware.js to check for auth token in cookies. If missing, redirected to login. If present, verified token validity. Used matcher config to apply only to protected routes. This intercepted requests before routing. Cleaned up auth logic from individual routes. Added headers to all responses. Logging tracked auth attempts.
12Coding
Implement dynamic routes with getStaticPaths and getStaticProps for blog posts
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
export async function getStaticPaths return paths from database ids. export async function getStaticProps id params return data and props. Page component receives props and renders. Fallback true for new posts.
13Multiple choice
Explain ISR and how it combines static generation with dynamic updates
Attempt the question first to reveal the answer.
Answer
ISR combines benefits of SSG and SSR. Pages are pre-rendered at build time. After revalidate time passes, Next.js re-generates the page in background. Serves stale content while generating fresh version.
14Written answer
Explain how ISR updates static pages without full site rebuilds
Attempt the question first to reveal the answer.
Answer
Incremental Static Regeneration combines static generation with dynamic updates. Pages are pre-rendered at build time like SSG. After revalidate time passes, Next.js re-generates page in background while serving stale version to users. User sees fast cached response. By next request, fresh page is ready. Enables updating individual pages without rebuilding entire site. On-demand revalidation via API allows immediate updates for critical content. Ideal for frequently changing content with acceptable staleness windows: news sites, product catalogs.
15Spoken answer
Talk about optimizing images in a gallery using Next.Image
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
Original gallery loaded all images immediately, blooming page with requests. I replaced with Next.Image component. Set fill prop with objectFit cover for consistent sizing. Lazy loading loaded images on scroll. Blur placeholder showed while loading, preventing Cumulative Layout Shift. Automatic WebP conversion reduced file sizes. Performance improved significantly.
16Coding
Create nested layouts for a dashboard with sidebar and main content area
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
app/dashboard/layout.js wraps with sidebar and main element. app/dashboard/page.js shows default dashboard. app/dashboard/settings/layout.js wraps settings with sub-navigation. Nested structure creates visual hierarchy.
17Multiple choice
How does the App Router improve upon the Pages Router in Next.js?
Attempt the question first to reveal the answer.
Answer
App Router uses directory structure for segments. Layouts enable shared UI across routes. Server Components reduce bundle size. Parallel routes and intercepting routes enable advanced patterns. Gradually replace Pages Router.
18Written answer
Describe the App Router structure, segments, and dynamic routes
Attempt the question first to reveal the answer.
Answer
App Router uses directory structure for routing. Each folder is a segment, each route.js or page.js is a route. layout.js files wrap child routes. Nested folders create nested routes: app/blog/post/page.js creates url /blog/post. Brackets denote dynamic segments: app/posts[id]/page.js captures parameter, accesses via params.id. Dynamic routes without static generation fall back to on-demand rendering. catch-all routes using [...slug] capture multiple segments. optional catch-all using [[...slug]] matches with or without segments. Parallel routes using @ notation enable rendering multiple content sections. Intercepting routes enable modal and side-panel patterns.
19Spoken answer
Describe how you would structure a multi-section app using layouts and segments
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
Root layout in app/layout.js included navigation and footer. app/dashboard/layout.js wrapped dashboard routes with sidebar. app/dashboard/settings/layout.js wrapped settings with sub-navigation. Each layout specialized shared UI for its segment. Metadata in root layout applied globally, overrideable in child layouts. Navigation didn't re-render when navigating between pages.
20Coding
Use Next.Image component to optimize and display images responsively
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
import Image from next image. Image src url alt description width height. Set fill for container-based sizing. Lazy loading enabled by default. Placeholder blur shows while loading.
21Multiple choice
Explain API routes and how they enable backend functionality in Next.js
Attempt the question first to reveal the answer.
Answer
API routes in the api directory become HTTP endpoints. Each file exports a handler function. POST, GET, DELETE, etc. are supported. Serverless functions run on Vercel or other hosts. Perfect for form submissions, database operations.
22Written answer
Explain API route implementation, request handling, and response patterns
Attempt the question first to reveal the answer.
Answer
API routes are in app/api directory. Each file exports a function: export async function POST request response. Request object contains method, body, query, headers, cookies. Response methods: res.status 200 .json data or res.status 400 .json error. Request body accessed via request.json for JSON or formData for forms. Query parameters from URL via request.nextUrl.searchParams. Environment variables accessed in .env.local. Database connections and authentication middleware run like Express. Errors caught with try-catch. Perfect for form submissions, webhooks, integrations.
23Spoken answer
Explain how you would handle form submissions using API routes
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
API route at app/api/submit/route.js handled POST requests. Extracted form data from request.body, validated, wrote to database, returned success response. Client component called this via fetch on form submit. API route validated input, handled errors, returned status codes. This kept backend logic separate from UI.
24Coding
Implement middleware to check authentication before routing to protected pages
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
middleware.js checks cookies for auth token. If missing, redirect to login. If present, verify token. Return response with user data in headers for routes to access.
25Multiple choice
Describe Next.js middleware and its role in request processing
Attempt the question first to reveal the answer.
Answer
Middleware.js runs before routing. Intercepts every request. Used for authentication checks, logging, redirects, headers. Runs on Edge Runtime for low latency. Can modify requests and responses.
26Written answer
Describe middleware creation, execution flow, and common use cases
Attempt the question first to reveal the answer.
Answer
Middleware defined in middleware.js or middleware.ts at project root. Function receives request and returns response or modified request. Executes before routing to any handler. Execution flow: request arrives, middleware runs, routing happens, response returns. Config object specifies which routes to match. Common use cases: authentication redirect to login if no session, logging track all requests, headers add security headers to responses, redirects route traffic conditionally, CORS handle cross-origin requests. Runs on Edge Runtime for low-latency execution.
27Spoken answer
Walk through implementing dynamic routes for a product catalog
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
Dynamic route app/products[id]/page.js captured product ID from URL params. Component received params object with id. Fetched product data using id. For static generation, getStaticPaths returned array of all product IDs. getStaticProps fetched data for each ID. Fallback true handled new products without pre-generation.
28Coding
Configure static generation with ISR for pages that update periodically
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
getStaticProps with revalidate 3600 regenerates after 1 hour. Page serves from cache, re-generates in background. On-demand revalidation via API call. ISR handler triggers revalidation for specific paths.
29Multiple choice
How does Next.js optimize images for performance and what formats does it support?
Attempt the question first to reveal the answer.
Answer
Next.Image lazy loads images on scroll. Serves images at optimal size for device. Automatically converts to WebP and AVIF for modern browsers. Prevents Cumulative Layout Shift. Requires width and height.
30Written answer
Explain lazy loading, responsive images, and format conversion in image optimization
Attempt the question first to reveal the answer.
Answer
Next.Image component handles optimization. Lazy loading loads images when entering viewport instead of all on page load. Responsive images: srcSet attribute serves different image sizes based on device width and pixel density. Width and height specified prevent Cumulative Layout Shift during lazy loading. Automatic format conversion: browser receives WebP if supported, AVIF for best compression, PNG or JPEG as fallback. On-the-fly resizing and compression via Next.js image server or external optimization service. placeholder blur shows low-quality placeholder while loading. Sizes attribute helps browser choose optimal image size.
31Spoken answer
Talk about using getStaticProps and getStaticPaths for a documentation site
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
App/docs/layout.js created docs segment. For each topic, created folder with page.js. getStaticPaths fetched all doc topics from database, returned paths. getStaticProps fetched content for each topic. Revalidate 86400 regenerated daily. Each page was static HTML. Search engines fully crawled content.
32Coding
Create a component that fetches data on the client with loading and error states
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
use client hook. useState for loading and data. useEffect fetches from API route. Conditional rendering for loading spinner, error message, or data. Clean-up function prevents memory leaks.
33Multiple choice
Explain layouts and how they enable shared UI structure across routes
Attempt the question first to reveal the answer.
Answer
Layout.js files automatically wrap child routes. Root layout wraps entire app. Segment layouts wrap nested routes. Layouts don't re-render on navigation. Enable shared UI like navigation, sidebars without duplication.
34Written answer
Describe layout nesting, segment layouts, and template reuse
Attempt the question first to reveal the answer.
Answer
Root layout in app/layout.js wraps entire application. Segment layouts in nested folders wrap child routes. Layouts don't re-render on navigation, only child content changes. Example: app/layout.js is root, app/blog/layout.js wraps blog routes, app/blog/post/layout.js wraps blog post routes. Multiple layouts can exist at same level for parallel routes. template.js is similar to layout but re-renders on navigation, useful for animations. Shared UI like navigation and footer go in layouts. Side effects like analytics in useEffect run in layouts. Metadata in layout.js applies to all child routes.
35Spoken answer
Describe how you would implement a real-time dashboard with client-side fetching
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
Dashboard needed real-time metrics updating every 5 seconds. Used client component with useEffect fetching from API route every 5 seconds. Displayed latest data. User saw updates without page reload. WebSocket would be alternative for pushing updates instead of polling.
36Coding
Build a form that submits to an API route and handles validation
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
form with onSubmit handler. Fetch POST to API route with form data. Handle success response and errors. Show validation messages. Redirect on success.
37Multiple choice
Compare different data fetching patterns and when to use each approach
Attempt the question first to reveal the answer.
Answer
Server Components fetch on server, no client JavaScript. getStaticProps pre-renders at build time for static data. getServerSideProps renders per request for dynamic data. Client-side fetch for real-time, interactive data.
38Written answer
Compare server components, getServerSideProps, getStaticProps, and client-side fetching
Attempt the question first to reveal the answer.
Answer
Server Components default in App Router, fetch on server, no client JavaScript sent. Best for private data, slow data sources, large dependencies. getServerSideProps Pages Router only, renders per request, enables dynamic content and authentication. Every request fetches data, slower response. getStaticProps Pages Router only, renders at build time, revalidate for updates. Fast serving but stale until revalidation. Client-side fetch via fetch or axios runs in browser, updates UI reactively. Best for interactive, frequently changing data like search results or real-time updates. Choose based on data freshness, privacy, and performance needs.
39Spoken answer
Explain how you would migrate from Pages Router to App Router
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
Attempt the question first to reveal the answer.
Answer
Migrated file structure: pages/ to app/, index.js to page.js, [id].js to [id]/page.js. getServerSideProps logic moved to Server Component fetch or getServerSideProps temporarily alongside new Server Components. Layouts extracted from _app.js wrapper. Tested incrementally, migrating section by section. Middleware.js replaced Next.config.js rewrites for routing logic.
40Coding
Set up dynamic metadata for SEO in layout and page components
Build your Next.js solution here
Attempt the question first to reveal the answer.
Answer
export const metadata in layout.js applies globally. export const generateMetadata function in page.js creates dynamic metadata. Metadata includes title, description, openGraph for social sharing. generateMetadata receives params for dynamic values.
Topics covered
Rendering strategies: SSR, SSG, and their trade-offs
Incremental static regeneration and revalidation
App Router vs Pages Router, and migrating between them
Server Components vs client-side fetching
Data fetching: Server Components, getServerSideProps, getStaticProps
Dynamic routes and nested layouts
API routes: GET and POST handlers
Middleware: request flow and authentication
Image optimization with next/image
SEO: the Metadata API and dynamic metadata
Frequently asked questions
How many Next.js interview questions are on this page?
40 real Next.js interview questions across four formats: multiple choice (10), written answer (10), spoken answer (10), and coding (10).
Do I need to sign up to practice?
No. All 40 questions and model answers are free with no signup. You attempt each question first, and the model answer unlocks once you have engaged.
Who are these Next.js interview questions for?
Developers preparing for Next.js technical interviews at any level, from first job to senior engineer roles. Questions cover fundamentals through real-world scenarios.
What topics do the Next.js questions cover?
The questions cover rendering strategies including SSR, SSG, and incremental static regeneration. They also test the App Router, Server Components, and data fetching. Other topics include dynamic routes, layouts, API routes, middleware, next/image, and the Metadata API.
Can I practice coding questions in the browser?
Yes. Coding questions include starter code in an in-browser editor, so you can write your solution without installing anything.
How often are the questions updated?
The question bank is reviewed regularly and updated to reflect current Next.js interview patterns.
Can I take a full mock interview?
Yes. Plaicer's mock technical interview walks you through a realistic 30 to 45 minute interview with AI-driven follow-up questions.
Do the questions cover the App Router or the Pages Router?
Primarily the App Router, including Server Components, layouts, and the Metadata API. Several questions compare it with the Pages Router, including a migration scenario.