Here are 20 advanced Next js interview questions and their answers that cover SSR, SSG, ISR, API routes, performance optimization, middleware, and more. This will help you stand out in senior or lead developer interviews.

---

🔥 Advanced Next js Interview Questions and Answers (2025)

---

1. What is the difference between SSR, SSG, and ISR in Next.js?

Answer:

• SSR (Server-Side Rendering): The page is rendered on each request.
• SSG (Static Site Generation): The page is pre-rendered at build time.
• ISR (Incremental Static Regeneration): Allows static pages to be updated after deployment without rebuilding the whole app.

---

2. How does getServerSideProps work in Next.js?

Answer:

• It runs on every request.
• Used for SSR.
• Must be exported from a page component to fetch server-side data before rendering.

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

---

3. How does getStaticProps differ from getServerSideProps?

Answer:

Feature	getStaticProps	getServerSideProps
Runs on	Build time	Every request
Performance	Fastest	Slower
Use case	Blogs, docs	Auth, dashboard

---

4. What is getStaticPaths used for?

Answer:

• Used with getStaticProps to define dynamic routes at build time.
• Required for SSG with dynamic paths (e.g., [id].js).

---

Advanced Next js Interview Questions and Answers

5. What is middleware in Next.js 13+?

Answer:

• Middleware runs before a request is completed.
• It helps with tasks like redirects, rewrites, authentication.

// middleware.ts
export function middleware(request) {
  const token = request.cookies.get("token");
  if (!token) return NextResponse.redirect("/login");
}

---

6. What are the benefits of using the App Router (Next.js 13+) over the Pages Router?

Answer:

• Better file-based layout system (layout.js).
• Server components support.
• React Streaming and Suspense integration.
• Incremental adoption possible.

---

7. Explain API routes in Next.js.

Answer:

• Located in /pages/api.
• Used to build backend APIs within the same app.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: "John" });
}

---

8. How can you optimize performance in Next.js?

Answer:

• Use Image Optimization via next/image.
• Enable dynamic imports.
• Use SSG/ISR wherever possible.
• Lazy load heavy components.
• Minimize bundle size with next/bundle-analyzer.

---

Advanced Next js Interview Questions and Answers

9. What is a dynamic import in Next.js?

Answer:

• Used to load components only when needed.

const DynamicComponent = dynamic(() => import('./HeavyComponent'), { ssr: false });

---

10. How do you implement custom error pages in Next.js?

Answer:

Create these files:

• pages/404.js
• pages/_error.js (for SSR)
• app/not-found.tsx (for App Router)

---

11. How does Next.js handle image optimization?

Answer:

• Uses the built-in next/image component.
• Supports automatic resizing, lazy loading, and modern formats like WebP.

---

12. What is prefetching in Next.js?

Answer:

• By default, Next.js prefetches linked pages in the background using <Link /> to enhance speed.

<Link href="/about" prefetch={false}>About</Link>

---

13. What is React Server Component (RSC) support in Next.js 13+?

Answer:

• Allows components to run only on the server.
• No client-side JS is sent.
• Used for faster rendering and better performance.

---

Advanced Next js Interview Questions and Answers

14. Explain next.config.js and how it’s used.

Answer:

• Central configuration file.
• Can customize:
  • Webpack config
  • Environment variables
  • Redirects/rewrites

---

15. How to handle authentication in Next.js apps?

Answer:

• Use middleware for route protection.
• Use libraries like NextAuth.js or JWT for token-based auth.
• Store tokens in cookies or secure storage.

---

16. What are Edge Functions in Next.js?

Answer:

• Lightweight functions running at the edge, close to the user.
• Lower latency than traditional server functions.
• Useful for auth, A/B testing, geo-based content.

---

17. How does revalidate work in ISR?

Answer:

export async function getStaticProps() {
  return {
    props: { data },
    revalidate: 10, // Revalidates every 10 seconds
  };
}

• Ensures stale content is updated in the background.

---

18. Difference between Client and Server Components in Next.js 13+?

Feature	Client Component	Server Component
Runs on	Browser	Server only
Interactivity	Yes	No
Bundle in JS	Yes	No
Syntax	"use client" needed	Default

---

Advanced Next js Interview Questions and Answers

19. How does file-based routing work in Next.js?

Answer:

• Every file in pages or app becomes a route.
• Dynamic routes use [param].js
• Catch-all: [...slug].js

---

20. What is useRouter() and its use?

Answer:

• Hook from next/router to access routing features.

import { useRouter } from 'next/router';

const Component = () => {
  const router = useRouter();
  return <p>Current route: {router.pathname}</p>;
};

---

Advanced Next js Interview Questions and Answers

Advanced Next js Interview Questions and Answers