Intermediate 3 min · July 13, 2026

Top Next.js Interview Questions & Answers for 2025

Q: What is the difference between getServerSideProps and getStaticProps?

getServerSideProps runs on every request and is used for dynamic data that changes frequently. getStaticProps runs at build time and is used for static data that doesn't change often. getStaticProps can also use revalidate for ISR.

Q: How do you handle client-side data fetching in Next.js?

You can use React hooks like useEffect and useState, or libraries like SWR or React Query. For pages that need client-side data, you can fetch after the page loads.

Q: What is the purpose of the 'next/link' component?

next/link provides client-side navigation between pages. It prefetches linked pages in the background for faster transitions.

Q: Can I use Next.js with TypeScript?

Yes, Next.js has built-in TypeScript support. You can create a new project with --typescript flag or rename files to .tsx.

Q: How does Next.js handle SEO?

Next.js provides server-side rendering and static generation, which helps search engines index content. You can also use next/head to manage meta tags.

Master Next.js interviews with our comprehensive guide covering SSR, SSG, ISR, routing, data fetching, performance optimization, and real-world scenarios..

Naren Founder & Principal Engineer

20+ years shipping production code across the stack, with years spent interviewing engineers. Notes here come from systems that actually shipped.

✓ Production

production tested

July 13, 2026

last updated

2,165

articles · all by Naren

Before you start⏱ 15-20 min read

✓Basic knowledge of React (components, props, state)
✓Familiarity with JavaScript ES6+
✓Understanding of web development concepts (HTTP, routing)

● Production Incident 🔎 Debug Guide ⚙ Triage Commands

⚡Quick Answer

Understand the difference between SSR, SSG, and ISR and when to use each.
Know how Next.js routing works, including dynamic routes and catch-all routes.
Be prepared to discuss data fetching methods: getServerSideProps, getStaticProps, getStaticPaths.
Explain the App Router vs Pages Router and the use of server components.
Demonstrate knowledge of performance optimization techniques like image optimization and incremental static regeneration.

✦ Definition~90s read

What is Next.js Interview Questions?

Next.js is a React framework that enables server-side rendering, static site generation, and other powerful features for building production-ready web applications.

★

Imagine you're building a library website.

Plain-English First

Imagine you're building a library website. Next.js is like a super-efficient librarian who can either prepare books in advance (SSG), fetch them on demand (SSR), or update them periodically (ISR). It also organizes your bookshelves (routing) and helps you find books quickly (performance).

⚙ Browser compatibility

Latest versions — ✓ supported

Chrome	Firefox	Safari	Edge
✓	✓	✓	✓

Next.js has become the go-to React framework for building production-ready web applications. Its powerful features like server-side rendering (SSR), static site generation (SSG), and incremental static regeneration (ISR) make it a favorite among developers and interviewers alike. In this guide, we'll cover the most common Next.js interview questions, from fundamental concepts to advanced topics. Whether you're preparing for a frontend or full-stack role, understanding Next.js can set you apart. We'll dive into routing, data fetching, performance optimization, and real-world scenarios that test your problem-solving skills. By the end, you'll be ready to tackle any Next.js interview question with confidence.

What is Next.js and Why Use It?

Next.js is a React framework that enables server-side rendering, static site generation, and other powerful features out of the box. It simplifies building SEO-friendly, performant web applications. Key benefits include automatic code splitting, optimized images, and file-system routing. Interviewers often ask this to gauge your understanding of the framework's value proposition.

basic-nextjs-app.jsJAVASCRIPT

// pages/index.js
export default function Home() {
  return <h1>Hello Next.js</h1>;
}

Output

Renders a page with 'Hello Next.js'

Try it live

🔥Key Point

📊 Production Insight

In production, Next.js can be deployed on Vercel or any Node.js server. Ensure you configure caching headers appropriately.

🎯 Key Takeaway

Next.js enhances React with SSR, SSG, and routing, making it ideal for production apps.

Pages Router vs App Router

Next.js 13 introduced the App Router, which is a new paradigm for building applications using React Server Components. The Pages Router is the traditional approach. The App Router supports nested layouts, streaming, and more. Interviewers want to see if you know the differences and when to use each. The App Router is now the recommended approach for new projects.

app-router-example.jsJAVASCRIPT

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// app/page.js
export default function Page() {
  return <h1>Hello App Router</h1>;
}

Output

Renders a page with layout and content.

Try it live

💡Interview Tip

📊 Production Insight

Migrating from Pages to App Router can be done incrementally. Both can coexist in the same project.

🎯 Key Takeaway

App Router is the modern way, but Pages Router is still widely used in existing projects.

Data Fetching Methods: SSR, SSG, ISR

Next.js provides three main data fetching methods: getServerSideProps (SSR), getStaticProps (SSG), and Incremental Static Regeneration (ISR). SSR fetches data on each request, SSG at build time, and ISR re-generates pages in the background after a specified time. Interviewers often ask you to compare them and choose the right one for a scenario.

data-fetching-examples.jsJAVASCRIPT

// SSR
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

// SSG
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data }, revalidate: 60 };
}

// ISR (same as SSG with revalidate)
// revalidate: 60 means at most every 60 seconds a new build is triggered.

Output

SSR: fresh data on each request. SSG: static at build time. ISR: static but revalidates.

Try it live

⚠ Common Mistake

📊 Production Insight

ISR can cause stale data if revalidate is too high. Monitor with revalidate-on-demand if needed.

🎯 Key Takeaway

Choose SSG for static content, SSR for dynamic, ISR for a balance.

Dynamic Routes and getStaticPaths

Dynamic routes allow you to create pages like /posts/[id]. For SSG, you need getStaticPaths to specify which paths to pre-render. You can also use fallback options: false, true, or 'blocking'. Interviewers test your understanding of how to handle dynamic routes and fallback behavior.

dynamic-routes.jsJAVASCRIPT

// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  const paths = posts.map(post => ({ params: { id: post.id.toString() } }));
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

Output

Pre-renders all post pages at build time; new posts are generated on first request.

Try it live

🔥Fallback Options

📊 Production Insight

Large sites with many dynamic paths may need to limit pre-rendered paths and rely on fallback.

🎯 Key Takeaway

Use getStaticPaths with fallback: 'blocking' for a good user experience with dynamic content.

API Routes and Middleware

Next.js API routes allow you to create serverless functions within the same project. Middleware runs before a request is completed, enabling redirects, rewrites, and authentication. Interviewers may ask how to create an API route or use middleware for authentication.

api-route.jsJAVASCRIPT

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

// middleware.js (in root)
export function middleware(req) {
  const { pathname } = req.nextUrl;
  if (pathname.startsWith('/admin') && !req.cookies.token) {
    return NextResponse.redirect('/login');
  }
}

Output

API route returns JSON. Middleware redirects unauthenticated users.

Try it live

💡Interview Tip

📊 Production Insight

Be mindful of cold starts for serverless functions. Consider using edge functions for low-latency middleware.

🎯 Key Takeaway

API routes and middleware are powerful for backend logic within Next.js.

Performance Optimization Techniques

Next.js offers built-in performance optimizations like automatic image optimization with next/image, script optimization with next/script, and code splitting. You can also use dynamic imports for lazy loading. Interviewers want to see your knowledge of these features and how to apply them.

image-optimization.jsJAVASCRIPT

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src='/hero.jpg'
      alt='Hero'
      width={1920}
      height={1080}
      priority
    />
  );
}

Output

Optimized image with lazy loading and responsive sizes.

Try it live

⚠ Common Mistake

📊 Production Insight

Monitor Core Web Vitals; use the built-in analytics to track performance.

🎯 Key Takeaway

Use next/image for automatic optimization and next/dynamic for lazy loading components.

Authentication and Authorization in Next.js

Implementing authentication in Next.js can be done using libraries like NextAuth.js or by integrating with Auth0, Firebase, etc. You need to protect pages and API routes. Interviewers may ask about strategies like JWT, session-based auth, and middleware protection.

auth-middleware.jsJAVASCRIPT

// middleware.js
export { default } from 'next-auth/middleware';
export const config = { matcher: ['/dashboard'] };

Output

Protects /dashboard route using NextAuth.js middleware.

Try it live

🔥Key Point

📊 Production Insight

Store tokens securely using httpOnly cookies. Avoid exposing secrets on the client.

🎯 Key Takeaway

Use middleware for route protection and libraries like NextAuth.js for authentication.

Deployment and Environment Variables

Next.js can be deployed to Vercel, Netlify, AWS, or any Node.js server. Environment variables are managed via .env.local files and need to be prefixed with NEXT_PUBLIC_ to be exposed to the browser. Interviewers may ask about deployment strategies and how to handle secrets.

env-example.jsJAVASCRIPT

// .env.local
API_KEY=secret
NEXT_PUBLIC_ANALYTICS_ID=UA-123

// pages/index.js
console.log(process.env.NEXT_PUBLIC_ANALYTICS_ID); // works
console.log(process.env.API_KEY); // undefined on client

Output

Only public env vars are available client-side.

Try it live

⚠ Common Mistake

📊 Production Insight

Set environment variables in your hosting platform's dashboard, not in code.

🎯 Key Takeaway

Use NEXT_PUBLIC_ prefix for client-side env vars; keep secrets server-side.

● Production incidentPOST-MORTEMseverity: high

The Case of the Stale Dashboard

Symptom

Users reported that the dashboard displayed data that was several hours old, even though new data was being added every minute.

Assumption

The developer assumed that setting revalidate: 10 in getStaticProps would update the page every 10 seconds.

Root cause

The revalidate time is the minimum time before a re-generation can occur, but it's not guaranteed to happen exactly at that interval. Also, the page was being served from a CDN cache that ignored the revalidate header.

Fix

Switched to server-side rendering (getServerSideProps) for real-time data and added a cache-control header to allow CDN caching for a short duration.

Key lesson

Understand that ISR revalidate is a minimum time, not a fixed interval.
Always test with production-like CDN settings.
Use SSR for truly real-time data.
Monitor cache headers and CDN behavior.
Consider using WebSockets or polling for live updates.

Production debug guideSymptom to Action4 entries

Symptom · 01

Page shows stale data

→

Fix

Check getStaticProps revalidate value and CDN cache headers. Use fetch with cache: 'no-store' if needed.

Symptom · 02

404 on dynamic route after build

→

Fix

Verify getStaticPaths returns all expected paths. Ensure fallback is set correctly (true, false, or 'blocking').

Symptom · 03

Slow page load

→

Fix

Check for large bundle sizes. Use next/dynamic for lazy loading. Optimize images with next/image.

Symptom · 04

API route returns 500

→

Fix

Check serverless function logs. Ensure environment variables are set. Test locally with serverless-offline.

★ Quick Debug Cheat SheetCommon Next.js issues and immediate fixes.

Page not updating after data change−

Immediate action

Clear CDN cache and re-deploy.

Commands

curl -X PURGE https://yourdomain.com/page

npm run build && npm run start

Fix now

Set revalidate to a lower value or use SSR.

Dynamic route 404 on fresh build+

Client-side error after navigation+

Feature	SSR	SSG	ISR
Data freshness	Always fresh	Stale until rebuild	Fresh after revalidation
Build time	No build time	Longer build time	Build time + revalidation
Server load	High (per request)	Low (static files)	Low (static + revalidation)
Use case	User dashboards	Blog posts	Product pages

⚙ Quick Reference

8 commands from this guide

File	Command / Code	Purpose
basic-nextjs-app.js	export default function Home() {	What is Next.js and Why Use It?
app-router-example.js	export default function RootLayout({ children }) {	Pages Router vs App Router
data-fetching-examples.js	export async function getServerSideProps() {	Data Fetching Methods
dynamic-routes.js	export async function getStaticPaths() {	Dynamic Routes and getStaticPaths
api-route.js	export default function handler(req, res) {	API Routes and Middleware
image-optimization.js	export default function Page() {	Performance Optimization Techniques
auth-middleware.js	export { default } from 'next-auth/middleware';	Authentication and Authorization in Next.js
env-example.js	API_KEY=secret	Deployment and Environment Variables

Key takeaways

Understand the trade-offs between SSR, SSG, and ISR to choose the right data fetching strategy.

Master the App Router and its features like server components and nested layouts.

Optimize performance using built-in components like next/image and next/dynamic.

Implement authentication securely with middleware and libraries like NextAuth.js.

Avoid common pitfalls like incorrect fallback handling and exposing secrets.

Common mistakes to avoid

5 patterns

Using getServerSideProps for pages that don't need real-time data.

Forgetting to add width and height to next/image.

Not handling fallback in getStaticPaths properly.

Exposing environment variables without NEXT_PUBLIC_ prefix on the client.

Overusing client-side effects for data fetching when SSR or SSG is possible.

INTERVIEW PREP · PRACTICE MODE

Interview Questions on This Topic

Q01SENIOR

Explain the difference between SSR, SSG, and ISR in Next.js. When would ...

Q02SENIOR

How do you implement dynamic routing in Next.js? Provide an example.

Q03SENIOR

What are the advantages of using the App Router over the Pages Router?

Q04SENIOR

How would you optimize a Next.js application for performance?

Q05SENIOR

Describe how you would implement authentication in a Next.js application...

Q01 of 05SENIOR

Explain the difference between SSR, SSG, and ISR in Next.js. When would you use each?

ANSWER

SSR (Server-Side Rendering) generates HTML on each request, ideal for personalized or real-time data. SSG (Static Site Generation) generates HTML at build time, best for static content like blogs. ISR (Incremental Static Regeneration) updates static pages after build without rebuilding the entire site, suitable for content that updates periodically.

FAQ · 5 QUESTIONS

Frequently Asked Questions

What is the difference between getServerSideProps and getStaticProps?

How do you handle client-side data fetching in Next.js?

What is the purpose of the 'next/link' component?

Can I use Next.js with TypeScript?

How does Next.js handle SEO?

Naren Founder & Principal Engineer

20+ years shipping production code across the stack, with years spent interviewing engineers. Notes here come from systems that actually shipped.

✓ Verified

production tested

July 13, 2026

last updated

2,165

articles · all by Naren

🔥

That's JavaScript Interview. Mark it forged?

3 min read · try the examples if you haven't