What should I review for a Next.js interview?
Which topic should I start with?
Start with rendering. It appeared in 18 of 31 interviews, more than any other topic. The comparison of server-side and client-side rendering was the most asked question, appearing in 8 of 31 interviews.
Check whether you can explain the choices, not just name them:
- Can you compare server-side rendering with client-side rendering?
- Can you explain how static site generation (SSG) differs from server-side rendering (SSR)?
- Can you explain Incremental Static Regeneration (ISR) and when you would use it?
- Can you choose a rendering approach for different pages and explain the tradeoffs?
Can I explain why I would choose Next.js?
The basics questions ask what Next.js provides, what problems it solves, and how it compares with React alone. Review the choice itself, not just a list of features.
Can you say when you would choose Next.js and when you would choose React alone? Can you describe what Next.js offers if you do not use server-side rendering? The questions include that last point, so your explanation should not stop at SSR.
Can I explain data fetching and component choices?
The data-fetching questions cover both Pages Router functions and App Router choices. Check that you can explain each approach rather than giving the same answer for both routers.
- Can you explain what
getStaticPropsandgetServerSidePropsdo and when you would use each? - Can you choose where to fetch data in the App Router?
- Can you explain your choices for caching and revalidation?
The Server Components topic adds another set of checks. Can you describe Server and Client Component boundaries? Can you explain streaming and how you would organize components and resources for a real page?
What should I check beyond rendering?
The questions also cover routing, authentication, performance, SEO, and architecture. Use these checks to find gaps beyond rendering and data fetching:
- Can you compare the App Router and Pages Router and choose navigation elements?
- Can you explain how you would handle client errors, server failures, and missing pages?
- Can you describe how you would protect pages and data queries, or decide whether to use a separate backend server?
- Can you explain how you would investigate a slow page, image loading, repeated renders, or a server-side memory leak?
- Can you discuss SPA indexing limits, accessibility, and scalability before choosing a stack?
Who gets asked Next.js
The 20 most asked Next.js questions
Counted by interview, not by mention: a question asked twice in one conversation counts once.
What's the difference between server-side rendering and client-side rendering in Next.js?
Asked in 8 of 31 interviews · last asked Oct 2 · Concept · Mid-level
Show answer
Server-side rendering (SSR) creates page HTML on the server for each request. Client-side rendering (CSR) creates content in the browser using JavaScript. SSR is useful when fresh content must appear in the initial HTML, including for search engines. CSR suits private dashboards and content that loads after user actions.
- SSR adds server work per request but sends rendered content before browser JavaScript runs.
- CSR may show a loading state while JavaScript and data load.
- Next.js can combine server-rendered content with client-side updates and interaction.
- In the App Router, 'use client' does not mean browser-only rendering; Client Components can be prerendered.
What the interviewer checks: The interviewer checks whether you understand where rendering happens and how that affects loading, search visibility, and interaction.
Other ways it was asked
- “What is the difference between server-side rendering (SSR) and client-side rendering (CSR) in Next.js?”
- “When would you use client-side rendering rather than server-side rendering in Next.js?”
- “What is server-side rendering in Next.js?”
How does Next.js compare with React alone, and when would you choose each?
Asked in 6 of 31 interviews · last asked Oct 6 · Concept · Junior
Show answer
Next.js is a framework built on React; React alone is a library for building user interfaces. Next.js adds routing, server rendering, and static page generation. I would choose Next.js for content-heavy sites where search visibility and fast first loads matter. I would choose React with a build tool for a client-side app that needs fewer framework rules.
- Next.js provides rendering and routing tools; React alone leaves those choices to you.
- Server-rendered or static pages can help search visibility, but Next.js does not guarantee better performance.
- Client-side React often suits internal dashboards where search visibility matters less.
- Consider team skills, delivery time, hosting costs, and maintenance needs.
What the interviewer checks: The interviewer checks whether you understand the difference and can choose based on product and team needs.
Other ways it was asked
- “What factors would you consider when choosing between Next.js and React for the frontend?”
- “What factors would you consider when choosing between React and Next.js for the frontend, excluding Next.js full-stack features?”
- “What business factors would you consider when choosing between React and Next.js?”
What is the difference between SSG and SSR in Next.js?
Asked in 6 of 31 interviews · last asked Oct 7 · Concept · Mid-level
Show answer
SSG pre-renders pages, usually at build time, and reuses the output. SSR renders pages on the server for each request. SSG usually gives faster responses and suits shared, stable content. SSR suits personalized pages or request-time data, but adds server work and can increase response time.
- SSG output can be cached on a CDN; without regeneration, content stays unchanged until another build.
- SSR can still use cached data, so request-time rendering does not guarantee fresh data.
- ISR updates cached static pages without a full rebuild; users may briefly receive older content.
- CSR renders content in the browser and can suit interactive areas that do not need search indexing.
What the interviewer checks: The interviewer checks whether you can choose a rendering method based on caching, speed, personalization, and data freshness.
Other ways it was asked
- “What is the difference between SSR and SSG in Next.js?”
- “In Next.js, what is the practical difference between SSR and SSG in terms of caching, performance, and data freshness?”
- “What is the difference between SSR and ISR in Next.js?”
What is Next.js, and what problems does it solve in modern web development?
Asked in 4 of 31 interviews · last asked Sep 30 · Concept · Junior
Show answer
Next.js is a React framework for building full-stack web applications. It adds routing, server rendering, static page generation, and server-side request handling. These tools reduce setup work and can improve page loading and SEO compared with a client-only React app.
- File-based routing maps files and folders to pages and endpoints.
- Server rendering and static generation make page content available without waiting for browser JavaScript.
- Built-in image optimization and code splitting help reduce loading costs.
- Rendering and deployment choices depend on how often data changes and whether pages need user-specific content.
What the interviewer checks: The interviewer wants to know how Next.js extends React and which web development problems its features solve.
Other ways it was asked
- “Why would you use Next.js?”
- “What do you know about Next.js?”
- “What is Next.js?”
Could you explain what each function does and when you'd use getStaticProps versus getServerSideProps?
Asked in 3 of 31 interviews · last asked Aug 20 · Concept · Mid-level
Show answer
In the Pages Router, getStaticProps loads data to generate a page at build time, with optional updates through revalidation. Use it for shared content that can be reused across requests, such as blog posts. getServerSideProps loads data and renders the page on each request, so use it for request-specific data or data that must be fetched fresh.
- Both functions run only on the server and return data as page props.
- getStaticProps supports Incremental Static Regeneration through the revalidate option.
- getServerSideProps can read request cookies and headers, but adds server work for each request.
- These functions are for the Pages Router, not the App Router.
What the interviewer checks: The interviewer checks whether you can choose between reusable static pages and request-time rendering based on data needs.
Other ways it was asked
- “What is the purpose of getStaticProps and getServerSideProps?”
- “What are getStaticProps and getServerSideProps used for?”
What is static site generation in Next.js, and when would you use it?
Asked in 2 of 31 interviews · last asked Aug 20 · Concept · Mid-level
Show answer
Static site generation (SSG) in Next.js creates a page’s HTML at build time, rather than for each request. The result can be cached and served quickly through a CDN, with less server work. I use it for blogs, documentation, and marketing pages where content is shared across users and does not change often.
- SSG can fetch data during the build; it is not limited to pages without data.
- Static pages need a rebuild to update, unless you use Incremental Static Regeneration (ISR).
- Request-specific content, such as a private dashboard, needs another rendering or data-fetching approach.
What the interviewer checks: The interviewer is checking whether you understand when pages are generated and how content freshness affects rendering choices.
Other ways it was asked
- “What is static site generation in Next.js?”
- “Why does static site generation in Next.js help performance, and what pages fit it best?”
What is Incremental Static Regeneration (ISR) in Next.js, and how does it work?
Asked in 2 of 31 interviews · last asked Oct 7 · Concept · Junior
Show answer
Incremental Static Regeneration (ISR) lets Next.js update static pages without rebuilding the whole site. With time-based revalidation, the first request after the interval gets the cached page while Next.js regenerates it in the background. After regeneration succeeds, later requests get the updated page.
- Unlike SSR, ISR serves cached pages instead of rendering a page for every request.
- Unlike build-only SSG, ISR can update pages after deployment; unlike CSR, it generates content on the server.
- Updates can use time-based or on-demand revalidation; the time interval does not schedule automatic regeneration.
- If background regeneration fails, Next.js keeps serving the last successful version.
What the interviewer checks: The interviewer checks whether you understand how ISR balances static-page speed with fresh content.
Other ways it was asked
- “What does ISR stand for in Next.js?”
- “What is ISR in Next.js, and how does it differ from SSR, CSR, and SSG?”
How do you choose where to fetch data in the App Router and handle caching and revalidation?
Asked in 2 of 31 interviews · last asked Jun 29 · Scenario · Senior
Show answer
I fetch initial page data in Server Components to keep secrets on the server. I use Route Handlers for HTTP endpoints and Client Components for browser-only or interactive fetching. I choose caching explicitly with `cache: 'force-cache'`, `next.revalidate`, or `cache: 'no-store'`. After writes, I invalidate cached data by tag or path.
- Server Components should call the data source directly, not your own Route Handler.
- Since Next.js 15, fetch requests and GET Route Handlers are not cached by default.
- `next.revalidate` sets a lifetime in seconds; `revalidatePath` and `revalidateTag` invalidate by path or tag.
- Client libraries manage separate caches; server revalidation does not automatically refresh those caches.
What the interviewer checks: The interviewer checks whether you choose the right fetching location and keep cached data fresh without exposing secrets.
Other ways it was asked
- “When you fetch data in the Next.js App Router, how do you choose between fetching in a Server Component, a Route Handler, or a Client Component, and how does that choice affect caching and revalidation?”
- “How does data fetching work in the App Router?”
What benefits can Next.js offer if you do not use server-side rendering?
Asked once · last asked Oct 2 · Concept · Mid-level
Show answer
Next.js still provides file-based routing, automatic code splitting, and built-in development tools. Static generation creates HTML at build time, which can help loading speed and SEO. You can also fetch data in the browser and use a static export to host supported pages without a Next.js server.
- Static generation does not need server-side rendering on each request.
- Routing and automatic code splitting are useful for client-rendered pages too.
- Static exports support static hosting, but cannot use features that need a Next.js server.
What the interviewer checks: The interviewer wants to know whether you understand Next.js benefits beyond request-time server rendering.
What is Nextwind?
Asked once · last asked Oct 8 · Concept · Junior
Show answer
Nextwind usually refers to a starter template that combines Next.js with Tailwind CSS. It helps you start a project with styling already set up. It is not a built-in Next.js feature, so the exact setup depends on the template.
- Next.js provides the application framework; Tailwind CSS provides utility classes for styling.
- Check the specific template’s documentation for included tools and supported versions.
What the interviewer checks: The interviewer is checking whether you understand the starter template and the roles of Next.js and Tailwind CSS.
What rendering techniques does Next.js support, and what are the advantages of each?
Asked once · last asked Sep 22 · Concept · Mid-level
Show answer
Next.js supports static generation (SSG), server-side rendering (SSR), incremental static regeneration (ISR), and client-side rendering (CSR). SSG serves prebuilt pages quickly; SSR creates HTML per request for fresh or personalized data. ISR refreshes static pages without a full rebuild. CSR loads and updates content in the browser, which suits interactive pages.
- In Next.js 12’s Pages Router, getStaticProps enables SSG; getServerSideProps enables SSR.
- ISR can use revalidate with getStaticProps; users may briefly see stale content.
- SSG, SSR, and ISR provide rendered HTML, helping SEO compared with browser-only content.
- Modern App Router versions also support streaming server-rendered content as parts become ready.
What the interviewer checks: The interviewer checks whether you can choose a rendering method based on speed, data freshness, personalization, and SEO.
Other ways it was asked
- “Which rendering techniques does Next.js 12 support?”
When choosing between static site generation with Next.js and traditional client-side rendering for a new project, what factors would influence your decision, and how would you weigh them?
Asked once · last asked May 16 · Scenario · Mid-level
Show answer
I would weigh SEO, first-load speed, content freshness, and personalization. I would favor Next.js static generation for public pages that can be built ahead of time, and client-side rendering for private dashboards with frequent updates. I would also compare build costs and browser workload, and choose per page rather than force one approach everywhere.
- Static pages provide ready-made HTML, helping search engines and reducing the wait for content.
- Static content needs rebuilding or revalidation to stay fresh; many pages can increase build time.
- Client-side rendering suits personalized data, but users may wait for JavaScript and API requests.
- Static pages can still be interactive and fetch fresh data in the browser.
What the interviewer checks: The interviewer checks whether you can balance user needs, data freshness, performance, and maintenance costs.
What are the advantages and disadvantages of using Next.js in SPA mode?
Asked once · last asked Jun 26 · Concept · Mid-level
Show answer
Using Next.js as a client-rendered SPA keeps its routing and code splitting, but gives up server-rendered page content. This can suit private dashboards, where SEO matters less. The trade-offs include more browser work, potentially slower first content, and weaker SEO for content loaded only in the browser.
- Static export allows static hosting, but features needing a Next.js server are unavailable.
- Client-side navigation is not the same as client-only rendering; normal Next.js apps also navigate without full reloads.
- In the App Router, 'use client' alone does not disable server rendering.
- For a simple SPA, Next.js may add complexity compared with a smaller React setup.
What the interviewer checks: The interviewer checks whether you understand client rendering trade-offs and when Next.js is useful without server rendering.
Other ways it was asked
- “What experience do you have using Next.js in SPA mode, and what are the advantages and disadvantages of this approach?”
How would you design a Next.js application that uses SSR, SSG, and ISR for different types of pages?
Asked once · last asked Sep 17 · Design · Senior
Show answer
I use SSG for stable public pages, such as documentation, generated at build time. I use ISR for public pages, such as product listings, that can tolerate some stale data. I use SSR for account pages or data that must be fetched on each request, keeping private responses out of shared caches.
- In the Pages Router, use getStaticProps for SSG, add revalidate for ISR, and use getServerSideProps for SSR.
- In the App Router, configure caching and revalidation explicitly; defaults depend on the Next.js version.
- ISR can serve stale content while regenerating; it does not guarantee fresh data on every request.
- Check authentication and authorization on the server before returning private data.
What the interviewer checks: The interviewer checks whether you can balance freshness, speed, and privacy when choosing rendering for each route.
When would you choose Next.js and server-side rendering for a web application?
Asked once · last asked Oct 2 · Concept · Mid-level
Show answer
I would choose Next.js when I need React with built-in routing and server rendering. I would use server-side rendering when pages need fresh or user-specific data on each request, or search engines need the page content in HTML. For content that changes less often, static generation or revalidation may be simpler and cheaper.
- Next.js supports server rendering and static pages; not every page needs server-side rendering.
- Server-side rendering adds server work and can delay responses while data loads.
- Static pages can also support SEO; SEO alone does not require rendering on every request.
- A client-rendered app may be enough for a private dashboard.
What the interviewer checks: The interviewer checks whether you can match rendering choices to data freshness, SEO, performance, and server cost.
How would you organize components and load resources when rendering a product listing page in Next.js?
Asked once · last asked Oct 8 · Scenario · Senior
Show answer
I would split the page into a filter bar, product grid, product cards, and pagination. With the App Router, I would fetch products in Server Components and use Client Components only for interactive controls. I would load one page of products at a time, optimize images with next/image, and defer heavy optional features.
- Keep filters, sorting, and page numbers in the URL so links preserve the view.
- Choose caching and revalidation based on how fresh prices and stock must be.
- Lazy-load off-screen images, but prioritize the main image visible when the page opens.
- Use loading and error boundaries so slow or failed requests have clear feedback.
What the interviewer checks: The interviewer checks whether you can structure the page clearly while limiting client JavaScript and unnecessary data loading.
How does streaming work with Next.js and React?
Asked once · last asked Oct 1 · Concept · Senior
Show answer
Streaming lets Next.js send a page in parts instead of waiting for everything to finish. In the App Router, React Suspense boundaries let ready content appear while slower sections show fallbacks. As those sections finish rendering on the server, React replaces their fallbacks with the content.
- Use loading.js for a route-level fallback, or Suspense for individual sections.
- Streaming improves perceived loading speed; it does not make data fetching faster.
- Client Components still need JavaScript and hydration to become interactive.
What the interviewer checks: The interviewer checks whether you understand progressive rendering, Suspense boundaries, and how streaming differs from hydration.
What are React Server Components, and how do you decide where to place the “use client” boundary?
Asked once · last asked Jan 14 · Concept · Mid-level
Show answer
React Server Components run on the server without sending their component code to the browser. In the Next.js App Router, components are Server Components by default. I place "use client" at the smallest practical interactive entry point that needs state, effects, or browser APIs, keeping most code on the server.
- The directive marks a module boundary; imported components also become part of the client bundle.
- Props passed from server to client must use React-supported serializable values.
- Client Components can render on the server first; access browser APIs in effects or event handlers.
- Server Components passed as children to Client Components can stay on the server.
What the interviewer checks: The interviewer checks whether you understand the server-client boundary and can limit client JavaScript without breaking interactivity.
How do you incorporate server-side rendering with Next.js in your applications, particularly when managing data-fetching requirements?
Asked once · last asked May 16 · Tooling · Mid-level
Show answer
I fetch data on the server and render HTML before sending it to the browser. In the App Router, I use async Server Components and enable request-time rendering when needed. In the Pages Router, I use getServerSideProps. I choose caching based on data freshness needs and handle loading and errors.
- Server Components alone do not guarantee rendering on every request.
- Use explicit cache settings; defaults differ between Next.js versions.
- Fetch independent data in parallel to reduce response time.
- Keep secrets on the server, and avoid sharing cached user-specific data between users.
What the interviewer checks: The interviewer checks whether you can choose the right rendering method and fetch data safely and efficiently.
What is the purpose of getStaticProps and getStaticPaths in Next.js?
Asked once · last asked Aug 20 · Concept · Mid-level
Show answer
In the Pages Router, getStaticProps fetches data to build a page ahead of requests, usually at build time. For dynamic routes, getStaticPaths lists which paths to build then. Its fallback setting controls what happens when someone requests a path not listed. The App Router uses different APIs.
- getStaticProps returns props for the page and can enable periodic regeneration with revalidate.
- getStaticPaths is used with getStaticProps on dynamic routes.
- Fallback can return a 404, show a loading state, or wait while an unlisted page is generated.
- These functions run only on the server, not in the browser.
What the interviewer checks: The interviewer checks whether you understand static generation, dynamic routes, and how fallback handles paths not built ahead of time.
Next.js basics interview questions
Start with what Next.js provides, how it compares with React alone, and related tools such as Nextwind. 4 questions.
Next.js rendering interview questions
Compare SSR, SSG, ISR, and client-side rendering, then consider SPA tradeoffs and rendering choices for different pages. 9 questions.
Next.js Server Components and streaming interview questions
Explore Server and Client Component boundaries, streaming, and ways to organize components and resources for real pages. 3 questions.
Next.js data fetching and caching interview questions
Review Pages Router data-fetching functions alongside App Router fetching choices, caching, and revalidation. 4 questions.
Next.js routing and error handling interview questions
Routing questions cover the App Router, Pages Router, navigation choices, and handling client errors, server failures, and missing pages. 4 questions.
How would you handle errors on the client side in a Next.js application?
Asked once · last asked Oct 8 · Scenario · Mid-level
Other ways it was asked
- “How would you handle errors that occur on the server side in a Next.js application?”
In Next.js, when should you use the Link component, and when should you use an <a> element?
Asked once · last asked Mar 21 · Concept · Junior
What are the differences between the Next.js App Router and Pages Router?
Asked once · last asked Apr 16 · Concept · Mid-level
In Next.js, where would you handle errors differently between the App Router and the Pages Router—for example, 404s, Server Component failures, and route-level exceptions?
Asked once · last asked Jun 29 · Concept · Senior
Next.js authentication and backend interview questions
Work through API routes, protected pages and data queries, tokens, microservice identity, and when to use a separate backend server. 5 questions.
Why would you use separate servers for a Next.js application and a Node.js backend?
Asked once · last asked Mar 20 · Design · Mid-level
How would you use Next.js to manage authentication and protect routes so only signed-in users can access them?
Asked once · last asked Mar 21 · Scenario · Mid-level
In recent versions of Next.js, what mechanism would you use to protect authenticated data queries?
Asked once · last asked Mar 21 · Concept · Mid-level
How would you manage authenticated users across Next.js and microservices so a chat system can identify who is messaging, and what is a token?
Asked once · last asked Jul 16 · Scenario · Mid-level
What is an API route in Next.js?
Asked once · last asked Jun 1 · Concept · Junior
Next.js performance optimization interview questions
Performance questions ask about slow pages, images, LCP, repeated renders, and server-side memory leaks. 6 questions.
If Lighthouse reports a high LCP for a full-width banner, how would you optimize the banner using the Next.js Image component?
Asked once · last asked Mar 21 · Scenario · Mid-level
How do you optimize the performance of the client-side application in Next.js when using SPA mode?
Asked once · last asked Jun 26 · Scenario · Senior
In a Next.js app, what are the most common ways memory leaks happen on the server side around SSR or API routes, and what would you check first?
Asked once · last asked Jul 27 · Scenario · Senior
When you suspect a leak caused by global state in a Next.js app, how do you prevent rerenders in a large component tree, and when would you choose React.memo versus useMemo or useCallback?
Asked once · last asked Jul 27 · Scenario · Senior
If your Next.js page has become slow, how would you troubleshoot it?
Asked once · last asked Sep 17 · Scenario · Mid-level
What is the name of the image optimization component in Next.js?
Asked once · last asked Mar 21 · Concept · Junior
Next.js SEO and scalability interview questions
Consider SEO, SPA indexing limits, accessible CMS-driven apps, scalability, and the questions to ask before choosing a stack. 4 questions.
What SEO and indexing challenges can arise when running a Next.js application in SPA mode, and how does this approach affect predictability?
Asked once · last asked Jun 26 · Concept · Mid-level
What are the best practices in Next.js for scalability and accessibility when data comes from a content management system?
Asked once · last asked Jul 16 · Concept · Mid-level
How does Next.js support SEO?
Asked once · last asked Oct 6 · Concept · Mid-level
What uncertainties should a team resolve before choosing NestJS and Next.js for a new system?
Asked once · last asked Sep 4 · Scenario · Senior
Related interview questions
- Software Engineer interview questions
- React interview questions
- Angular interview questions
- Node.js interview questions
- HTML and CSS interview questions
- Spring Boot interview questions
- Android and Kotlin interview questions
- iOS and Swift interview questions
How this list is made
Every question here was asked by a real interviewer in a real job interview that a candidate ran MeetAssist in. After the call, the interviewer's questions are pulled from the transcript. Practice sessions, tests, exams and anything that was not a job interview are dropped.
Questions are rewritten so they make sense on their own: names of people, employers and clients are removed, and speech-to-text mistakes are fixed. Small talk, logistics and questions about one candidate's own résumé are left out. Rephrasings of the same question are merged, and the count is the number of different interviews it came up in.
The interviews come from candidates who use MeetAssist, so they lean towards software, data and AI roles: the shares describe these interviews, not every Next.js interview. Answers to the most asked questions are written and checked by an editor; a "common mistake" is shown only when reviews of real answers in these interviews show it, with the count.
31 interviews, 27 candidates, Jan 2026 to Oct 2026. Updated every month with new interviews.
Or add the Chrome extension