1. What is the "App Router" and how does it differ from the "Pages Router"?

The App Router (introduced in Next.js 13) is built on React Server Components. It uses a file-system-based router where folders define routes and files like layout.tsx and page.tsx define UI. It supports nested layouts, improved data fetching, and streaming.

2. Explain the "Static Rendering" vs "Dynamic Rendering" in App Router.

Static: Routes are rendered at build time or in the background after data revalidation.
Dynamic: Routes are rendered for each user at request time. A route becomes dynamic if it uses a "Dynamic Function" (like headers(), cookies()) or an uncached data request.

3. What is "Streaming" and how do you implement it?

Streaming allows you to break a page's HTML into smaller chunks and progressively send them to the client. This is implemented using loading.tsx for an entire route segment or by wrapping specific components in React <Suspense> boundaries.

4. How does "Data Fetching" work in the App Router?

Next.js extends the native fetch API to provide automatic request memoization, data caching, and revalidation. You fetch data directly inside Server Components using async/await, eliminating the need for getStaticProps or getServerSideProps.

5. What are "Server Actions"?

Server Actions are asynchronous functions that run on the server. They can be invoked from both Client and Server Components to handle form submissions and data mutations, reducing the need for manual API routes.

6. What is "Incremental Static Regeneration" (ISR)?

ISR allows you to update static content without rebuilding the entire site. In the App Router, this is achieved using the revalidate property in fetch or the revalidatePath and revalidateTag functions.

7. Explain "Route Handlers".

Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs. They are the replacement for API Routes in the pages directory.

8. What is "Middleware" and where does it run?

Middleware is code that runs before a request is completed. It runs in the "Edge Runtime," which is a lightweight runtime designed for low latency. Use it for authentication, redirects, and header manipulation.

9. How do you handle "Hydration Errors"?

Hydration errors often occur when using time/date or browser-only APIs (window). Fixes include using useEffect to ensure the code only runs on the client, or using the dynamic import with ssr: false.

10. What is "Partial Prerendering" (PPR)?

PPR is an experimental feature that allows a single route to have both static and dynamic parts. The static part is served instantly, while the dynamic part is streamed in as it becomes available.

11. Explain "Segment Config Options".

These are exported variables (like dynamic, revalidate, fetchCache) that allow you to control the behavior of a route segment (e.g., forcing a page to be static or dynamic).

12. What is "Pre-fetching" and how does it optimize navigation?

Next.js automatically pre-fetches the code for a linked route in the background as the <Link> component enters the viewport. This makes transitions between pages feel instantaneous.

13. What is the "Metadata API"?

A system for managing SEO-related tags (title, meta, etc.) in the App Router. You can export a static metadata object or a dynamic generateMetadata function from a layout.tsx or page.tsx.

14. What are "Parallel Routes"?

Parallel Routes allow you to simultaneously or conditionally render one or more pages in the same layout (using @folder slots). This is useful for dashboards or multi-view interfaces.

15. What are "Intercepting Routes"?

Intercepting Routes allow you to load a route from another part of your application within the current layout (e.g., opening a photo in a modal while keeping the gallery background visible).

16. What is the difference between `next/image` and a standard `<img>`?

next/image provides automatic image optimization: resizing (based on device), lazy loading, and serving modern formats like WebP or AVIF. It also prevents "Layout Shift" by requiring dimensions.

17. How do you implement "On-Demand Revalidation"?

By using revalidatePath(path) or revalidateTag(tag) inside an API route or a Server Action to purge the cache for specific data and trigger a background regeneration.

18. What is the "Edge Runtime" vs "Node.js Runtime"?

Node.js: Full Node.js environment; supports all modules; slower startup.
Edge: Restricted environment (limited APIs); extremely fast startup; runs closer to the user in various regions.

19. Explain "Request Memoization".

Next.js automatically caches fetch requests with the same URL and options in a single render pass. This means you can call the same fetch in multiple components without worrying about duplicate network requests.

20. What is the purpose of `generateStaticParams`?

It is used in dynamic routes to specify which paths should be generated at build time. It is the App Router equivalent of getStaticPaths.

21. How do you handle "Client-side State" in an SSR-heavy app?

Use the "use client" directive at the top of small, leaf-level components. Keep the state as close to where it's needed as possible to avoid unnecessary re-renders of the server-rendered tree.

22. What is "Optimistic Updates" with Server Actions?

Using the useOptimistic hook to immediately update the UI with the expected result of a server action before the server has even responded, providing a snappier user experience.

23. What is `next/font` and why is it preferred?

next/font automatically hosts fonts locally (no external requests to Google), removes layout shifts (CLS), and caches fonts at the edge for better performance.

24. Explain the "Error" boundary in Next.js (`error.tsx`).

It is a client component that wraps a route segment in a React Error Boundary. It allows you to display a fallback UI and provide a "Try Again" button without crashing the whole app.

25. What is "Dynamic Metadata"?

Using generateMetadata to fetch data (like a blog post title) and use it to set the page's meta tags dynamically for SEO.

26. How do you implement "Authentication" in the App Router?

Commonly handled via Middleware for protecting routes, combined with libraries like NextAuth.js (Auth.js) or external providers like Clerk/Kinde.

27. What is "Draft Mode"?

A feature that allows you to bypass the static cache and view the latest version of your content (useful for CMS previews).

28. What is the purpose of `next.config.js`?

The main configuration file for Next.js, used to set custom environment variables, redirects, rewrites, headers, and image domain whitelists.

29. Explain "Shallow Routing" (Pages Router).

Allows you to change the URL without running data fetching methods (getStaticProps, etc.) again. Limited in the App Router, where most navigation is handled via the soft-routing mechanism.

30. What is "Full Route Cache"?

A persistent cache on the server that stores the rendered HTML and data for static routes across multiple user requests.

31. What is "Router Cache"?

A temporary in-memory cache on the client that stores the pre-fetched and visited route segments during a single user session.

32. How do you optimize "Core Web Vitals" in Next.js?

By using next/image (for LCP), next/font (for CLS), and streaming/Suspense (for FID/TBT).

33. What is "Interception" of standard `fetch`?

Next.js patches the global fetch to enable its own caching and revalidation logic. You can opt-out by setting cache: 'no-store'.

34. What is "Server-side Redirect" in App Router?

Using the redirect() function inside a Server Component, Server Action, or Route Handler. It throws an error that Next.js catches to handle the redirect.

35. Explain "Rewrites" vs "Redirects".

Redirects: Tell the client to go to a new URL (URL changes).
Rewrites: Map an incoming path to a different destination internally (URL stays the same).

36. What is "CORS" handling in Route Handlers?

You must manually set the appropriate Access-Control-Allow-Origin and other headers in your Response object.

37. How do you handle "Large Files" in the public folder?

Static files in /public are served as-is. For very large assets, it's better to use an external CDN or cloud storage (S3).

38. What is the "Dynamic IO" experimental feature?

A new project from the Next.js team to automate several data caching decisions, making it harder to accidentally serve stale data.

39. What is "Static Export"?

Using output: 'export' in next.config.js to build a purely static site that can be hosted on any web server (removes server-side features like Server Actions and dynamic ISR).

40. Explain "Client Component Tree" vs "Server Component Tree".

Server Components can import Client Components, but Client Components cannot import Server Components directly. However, Client Components can take Server Components as children or props.

41. What is "Instrumentation"?

A feature (instrumentation.ts) that allows you to run code when the server starts, useful for setting up monitoring or database connections.

42. What is "Next.js Script" component?

Optimizes third-party scripts by providing control over loading priority (beforeInteractive, afterInteractive, lazyOnload).

43. What is "Server-side Cookies" management?

Using the cookies() function from next/navigation to read or set (only in Server Actions/Route Handlers) cookies directly on the server.

44. What is "Cache Poisoning" prevention?

Next.js uses a secure hashing mechanism for its internal cache keys and validates headers to prevent unauthorized cache updates.

45. What is the `useSearchParams` hook?

A client-side hook used to read the current URL's query parameters in a way that is compatible with the App Router's navigation system.

46. What is "Loading UI" (`loading.tsx`)?

A special file that automatically wraps the route segment in a Suspense boundary and displays a loading skeleton or spinner while data is being fetched.

47. Explain "Development vs Production" performance differences.

Next.js is extensively optimized in production (minification, tree-shaking, automated polyfilling), while development focuses on Fast Refresh and source maps.

48. What is the purpose of `robots.txt` and `sitemap.xml` in Next.js?

Next.js provides special file-based or function-based methods to generate these files automatically, ensuring crawlability for search engines.

49. What is "Turbopack"?

An incremental bundler optimized for Next.js, written in Rust, designed to be significantly faster than Webpack during development.

50. Why is Next.js the industry standard for React apps?

Because it solves the "blank page" problem of SPAs, provides an incredible developer experience with built-in optimizations, and scales from small blogs to massive enterprise applications.

Next.js Interview Questions

Table of Contents

What is the "App Router" and how does it differ from the "Pages Router"?

Explain the "Static Rendering" vs "Dynamic Rendering" in App Router.

What is "Streaming" and how do you implement it?

How does "Data Fetching" work in the App Router?

What are "Server Actions"?

What is "Incremental Static Regeneration" (ISR)?

Explain "Route Handlers".

What is "Middleware" and where does it run?

How do you handle "Hydration Errors"?

What is "Partial Prerendering" (PPR)?

Explain "Segment Config Options".

What is "Pre-fetching" and how does it optimize navigation?

What is the "Metadata API"?

What are "Parallel Routes"?

What are "Intercepting Routes"?

What is the difference between <code>next/image</code> and a standard <code>&#x3C;img></code>?

How do you implement "On-Demand Revalidation"?

What is the "Edge Runtime" vs "Node.js Runtime"?

Explain "Request Memoization".

What is the purpose of <code>generateStaticParams</code>?

How do you handle "Client-side State" in an SSR-heavy app?

What is "Optimistic Updates" with Server Actions?

What is <code>next/font</code> and why is it preferred?

Explain the "Error" boundary in Next.js (<code>error.tsx</code>).

What is "Dynamic Metadata"?

How do you implement "Authentication" in the App Router?

What is "Draft Mode"?

What is the purpose of <code>next.config.js</code>?

Explain "Shallow Routing" (Pages Router).

What is "Full Route Cache"?

What is "Router Cache"?

How do you optimize "Core Web Vitals" in Next.js?

What is "Interception" of standard <code>fetch</code>?

What is "Server-side Redirect" in App Router?

Explain "Rewrites" vs "Redirects".

What is "CORS" handling in Route Handlers?

How do you handle "Large Files" in the public folder?

What is the "Dynamic IO" experimental feature?

What is "Static Export"?

Explain "Client Component Tree" vs "Server Component Tree".

What is "Instrumentation"?

What is "Next.js Script" component?

What is "Server-side Cookies" management?

What is "Cache Poisoning" prevention?

What is the <code>useSearchParams</code> hook?

What is "Loading UI" (<code>loading.tsx</code>)?

Explain "Development vs Production" performance differences.

What is the purpose of <code>robots.txt</code> and <code>sitemap.xml</code> in Next.js?

What is "Turbopack"?

Why is Next.js the industry standard for React apps?

What is the difference between <code>next/image</code> and a standard <code><img></code>?