30+ Next js Interview Questions and Answers, updated for 2025 and suitable for freshers and experienced developers.

---

🔰 Beginner Level (1–10)

1. What is Next.js?

A React framework for building SSR, SSG, and hybrid apps with file-based routing and built-in performance optimizations.

---

2. How is Next.js different from React?

React is a library for UI, while Next.js is a framework built on top of React that offers routing, SSR, SSG, and API routes out of the box.

---

3. What is file-based routing?

Next.js uses the file system to create routes. Each file in the /pages folder becomes a route.

---

4. What is server-side rendering (SSR)?

SSR renders pages on the server at request time using getServerSideProps.

---

5. What is static site generation (SSG)?

SSG builds pages at build time using getStaticProps, improving speed and SEO.

---

Next js Interview Questions and Answers

6. What is getStaticProps()?

A function used to fetch data at build time for static generation.

---

7. What is getServerSideProps()?

Used to fetch data on every request, suitable for dynamic content.

---

8. What is getStaticPaths()?

Used with dynamic routes to specify which paths should be statically generated at build time.

---

9. How to create a dynamic route in Next.js?

Create a file like /pages/post/[id].js and access id using router.query.id.

---

10. How do you add global CSS in Next.js?

Import your CSS file in _app.js:

import '../styles/globals.css';

---

Next js Interview Questions and Answers

⚙️ Intermediate Level (11–20)

11. What is _app.js?

Used to initialize pages. You can use it to add layout, context providers, etc.

---

12. What is _document.js?

Customize the default HTML document structure. Only runs on the server.

---

13. What is _error.js?

Used to create custom error pages like 404 or 500 errors.

---

14. What is ISR (Incremental Static Regeneration)?

Allows you to update static pages after deployment using revalidate.

---

15. What are API routes in Next.js?

Create serverless API endpoints in the /pages/api/ directory.

---

Next js Interview Questions and Answers

16. How do you use middleware in Next.js?

Create a middleware.js file in the root to run code before rendering a page, e.g., for authentication.

---

17. How does Next.js support TypeScript?

Out of the box with npx create-next-app --ts and built-in types.

---

18. What is a fallback in getStaticPaths()?

Used to generate pages not generated at build time:

• fallback: false → 404 if not found
• fallback: true → loads fallback then builds
• fallback: 'blocking' → builds on first request

---

19. What is Head component in Next.js?

Used to modify meta tags:

import Head from 'next/head';

---

20. What are Layouts in Next.js?

Reusable page structures (headers/footers), usually implemented in _app.js or using the new app/ directory layouts in v13+.

---

Next js Interview Questions and Answers

🚀 Advanced Level (21–30)

21. What is the App Router in Next.js 13+?

A new routing system using the /app directory with support for layouts, nested routing, and React Server Components.

---

22. Compare Pages Router vs App Router.

Feature	Pages Router	App Router
Directory	/pages	/app
Data Fetching	getStaticProps, etc.	Server Components
Layouts	Manual	Built-in (layout.js)

---

23. How is image optimization handled in Next.js?

Using next/image which supports lazy loading, resizing, and modern formats.

---

24. How do you redirect in Next.js?

Inside getServerSideProps or using next.config.js.

return {
  redirect: {
    destination: '/login',
    permanent: false,
  },
}

---

25. What is next.config.js used for?

Customize Next.js config: images, redirects, environment variables, etc.

---

Next js Interview Questions and Answers

26. How to use environment variables in Next.js?

Define in .env.local:

NEXT_PUBLIC_API_URL=https://api.example.com

Access via: process.env.NEXT_PUBLIC_API_URL

---

27. What are React Server Components (RSC)?

Components rendered on the server without sending JS to the client, supported in the App Router.

---

28. What are loading and error UI in App Router?

You can create:

• loading.js → for loading UI
• error.js → for error boundaries

---

29. How to prefetch routes in Next.js?

Next.js automatically prefetches links using <Link> from next/link.

---

30. What is Streaming in Next.js?

Send chunks of HTML to the browser as it’s generated, improving performance for large pages. Available with React 18 and App Router.

---

🧠 Bonus Questions (31–35)

31. Can you use Redux in Next.js?

Yes, usually initialized in _app.js. For SSR, use a wrapper like next-redux-wrapper.

---

32. How to handle authentication in Next.js?

Use middleware or libraries like next-auth, and protect pages using SSR or client-side checks.

---

33. How to deploy a Next.js app?

Common options:

• Vercel (official hosting)
• Netlify
• Docker
• Custom Node.js server

---

34. What is the difference between Link and a tags in Next.js?

next/link enables client-side routing without full page reload. Always wrap <a> inside <Link>.

---

35. What is Code Splitting in Next.js?

Next.js automatically splits code by page, so users only load what’s necessary.

---

Next js Interview Questions and Answers