These are the Next.js questions you'll encounter in technical interviews, each with a detailed written answer. Master rendering strategies and data fetching, then work through API routes and advanced deployment patterns.
Next.js is a React framework that enables full-stack development with server-side rendering (SSR), static site generation (SSG), and API routes. Built by Vercel, it simplifies building modern, production-ready web applications.
Next.js interviews assess your understanding of rendering strategies, data fetching, API routes, middleware, and deployment. You'll discuss performance optimization, authentication, and how to build scalable applications.
Next.js expertise is increasingly valuable for full-stack roles. Master the framework and you'll be ready for roles at companies building production web applications.
Reading answers is not the same as giving them. Sit a full mock interview and get scored on how you actually explain them.
Try a mock interviewAnswer
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
This browser cannot record audio. Answer the question out loud anyway, then compare yourself against the model answer below.
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.
Build your Next.js solution hereAnswer
async function ProductList() { const products = await fetch url; return div containing product details and images }Build your Next.js solution hereAnswer
export async function POST request response { const data = await request.json; validate data; write to database; return response.json success status 200 }Build your Next.js solution hereAnswer
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.Build your Next.js solution hereAnswer
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.Build your Next.js solution hereAnswer
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.Build your Next.js solution hereAnswer
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.Build your Next.js solution hereAnswer
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.Build your Next.js solution hereAnswer
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.Build your Next.js solution hereAnswer
form with onSubmit handler. Fetch POST to API route with form data. Handle success response and errors. Show validation messages. Redirect on success.Build your Next.js solution hereAnswer
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.