Question 1

What is Next.js, and what are its key features?

Accepted Answer

Next.js is a React framework created by Vercel for building search-engine-friendly, high-performance web applications. Key features include Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR), Client-Side Routing, Server Actions, Middleware, and built-in optimizations for images, fonts, and scripts.

Question 2

What is the App Router in Next.js?

Accepted Answer

The App Router (introduced in Next.js 13) is a file-system based router built on React Server Components. It supports layouts, nested routing, loading states, error handling, and co-location of components. It runs inside the `app` directory, replacing the legacy `pages` directory.

Question 3

What is the difference between React Server Components (RSC) and Client Components?

Accepted Answer

React Server Components run exclusively on the server, have no client-side JavaScript bundle, and can query databases/APIs directly. Client Components (marked with 'use client') are pre-rendered on the server and dehydrated on the client, allowing use of client-side React hooks (useState, useEffect) and event listeners.

Question 4

How do you define a Client Component in the App Router?

Accepted Answer

You define a Client Component by adding the 'use client' directive at the very top of the file (above any imports). Any components imported into this file are also considered Client Components. Code Example: "use client"; import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ; }

Question 5

What is Server-Side Rendering (SSR) in Next.js?

Accepted Answer

Server-Side Rendering (SSR) is the process of rendering web pages on the server for *every single request* before sending them to the client. This ensures search engines see fully-rendered HTML and improves initial page load speed.

Question 6

What is Static Site Generation (SSG) in Next.js?

Accepted Answer

Static Site Generation (SSG) is a rendering method where HTML pages are pre-rendered at *build time*. The generated static HTML files are stored on a server or CDN and served instantly to users, offering maximum speed and SEO efficiency.

Question 7

What is Incremental Static Regeneration (ISR)?

Accepted Answer

Incremental Static Regeneration (ISR) allows you to update static pages *after* build time, in the background, without rebuilding the entire site. You specify a revalidation interval (in seconds). When a request comes in after that interval, Next.js regenerates the page in the background.
Code Example:
// Regenerate page at most once every 60 seconds
export const revalidate = 60;

export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  // ...
}

Question 8

What are Server Actions in Next.js?

Accepted Answer

Server Actions are asynchronous functions that run on the server but can be invoked directly from Client or Server Components. They enable form submissions and state mutations without manually setting up API routes.
Code Example:
// app/actions.js
"use server";

export async function createUser(formData) {
  const email = formData.get('email');
  await db.user.create({ data: { email } });
}

Question 9

What is Next.js Middleware?

Accepted Answer

Middleware is code that runs *before* a request is completed. It allows you to redirect requests, rewrite URLs, modify request or response headers, or check user authentication/cookies. It is defined in a `middleware.js` file at the root level.

Question 10

How do you fetch data in the App Router?

Accepted Answer

In the App Router, data is fetched directly inside React Server Components using standard async/await syntax and the native `fetch` API, which Next.js extends for automatic caching and revalidation. Code Example: export default async function Page() { const res = await fetch('https://api.github.com/repos/vercel/next.js'); const repo = await res.json(); return

{repo.stargazers_count} stars

; }

Question 11

How does caching work in Next.js (App Router)?

Accepted Answer

Next.js has a multi-level caching system: Request Memoization (de-duplicates fetches in the same render pass), Data Cache (caches fetch responses across user requests), Full Route Cache (caches HTML and RSC payloads at build/revalidate time), and Router Cache (client-side in-memory cache for page segments).

Question 12

What is dynamic routing in Next.js App Router?

Accepted Answer

Dynamic Routing is when a page folder is named using square brackets, e.g., `[id]` or `[slug]`. Next.js injects the dynamic value into the component's `params` prop. Code Example: // app/blog/[id]/page.js export default async function BlogPost({ params }) { const { id } = await params; return

Post ID: {id}

; }

Question 13

What are Route Handlers in Next.js?

Accepted Answer

Route Handlers (defined inside `route.js` files) allow you to create custom request handlers for a given route using standard Web Request/Response APIs. They replace the API Routes of the pages router.
Code Example:
// app/api/users/route.js
export async function GET(request) {
  const users = [{ id: 1, name: 'Alice' }];
  return Response.json(users);
}

Question 14

What is static metadata versus dynamic metadata?

Accepted Answer

Static metadata is defined using a static `metadata` object exported from a page or layout. Dynamic metadata is generated dynamically using the `generateMetadata` function, which can accept params or perform async fetch calls.
Code Example:
// Dynamic metadata example
export async function generateMetadata({ params }) {
  const product = await getProduct(params.id);
  return { title: product.title };
}

Question 15

How does `next/image` optimize images?

Accepted Answer

The `Image` component optimizes images automatically: converting them to modern formats (WebP/AVIF), resizing them to match layout requirements, lazy loading images off-screen, and preventing Layout Shift (CLS) by requiring explicit dimensions or layout placeholders.

Question 16

What is co-location in Next.js App Router?

Accepted Answer

Co-location is the practice of storing UI components, stylesheets, tests, and utility functions in the same folders as the routing pages. In the App Router, only files named `page.js` or `route.js` are publicly routable.

Question 17

What are Layouts and Templates in Next.js?

Accepted Answer

A layout (`layout.js`) is UI shared between nested routes that preserves state and does not re-render on navigation. A template (`template.js`) is similar but creates a new instance for each child route on navigation, executing hook effects anew.

Question 18

Explain the `generateStaticParams` function.

Accepted Answer

The `generateStaticParams` function is used in combination with dynamic routes to pre-build dynamic page paths at build time instead of on-demand. It replaces the legacy `getStaticPaths` of the pages router.
Code Example:
// app/product/[id]/page.js
export async function generateStaticParams() {
  const products = await getProducts();
  return products.map((product) => ({
    id: product.id.toString(),
  }));
}

Question 19

What is draft mode in Next.js?

Accepted Answer

Draft Mode allows developers to preview unpublished draft content from a headless CMS in real-time. By enabling draft mode, Next.js bypasses the static route cache, serving dynamic requests with CMS draft content.

Question 20

How do you handle errors in Next.js App Router?

Accepted Answer

You handle errors by creating an `error.js` component inside a route segment. Next.js wraps the route segment in a React Error Boundary, catching unexpected client or server exceptions and displaying the custom fallback UI without crashing the entire app.

Question 21

How do you co-locate styles using CSS Modules in Next.js?

Accepted Answer

Next.js supports CSS Modules out of the box using the `[name].module.css` file naming convention. CSS modules dynamically generate unique class names to prevent collision across pages. Code Example: // Button.js import styles from './Button.module.css'; export default function Button() { return ; }

Question 22

What is `next/font`?

Accepted Answer

`next/font` automatically optimizes Google Fonts or custom local fonts. It downloads font files at build time, hosts them locally in the static files bundle, and eliminates external network requests, preventing layout layout shifts.

Question 23

What is Parallel Routes in Next.js?

Accepted Answer

Parallel Routes (defined using `@folder` slots) allow you to render multiple pages simultaneously inside the same layout. Useful for split-screen dashboard layouts, modal screens, and complex layouts. Code Example: // app/layout.js export default function Layout({ children, analytics, team }) { return (

{children}

{analytics}

{team}

); }

Question 24

What is Intercepting Routes?

Accepted Answer

Intercepting Routes allow you to load a route within the current layout while masking the URL to show the route's target destination. It is often used to open an image overlay modal, preserving background context.

Question 25

How can you disable static caching on a page?

Accepted Answer

You can force a page to render dynamically (disabling cache) by exporting configuration constants from your page file: `export const dynamic = 'force-dynamic'` or by calling dynamic functions like `cookies()` or `headers()` inside the component.

Next.js Interview Master

Difficulty Filters

Tools & Options

What is Next.js, and what are its key features?

What is the App Router in Next.js?

What is the difference between React Server Components (RSC) and Client Components?

How do you define a Client Component in the App Router?

What is Server-Side Rendering (SSR) in Next.js?

What is Static Site Generation (SSG) in Next.js?

What is Incremental Static Regeneration (ISR)?

What are Server Actions in Next.js?

What is Next.js Middleware?

How do you fetch data in the App Router?

How does caching work in Next.js (App Router)?

What is dynamic routing in Next.js App Router?

What are Route Handlers in Next.js?

What is static metadata versus dynamic metadata?

How does `next/image` optimize images?

What is co-location in Next.js App Router?

What are Layouts and Templates in Next.js?

Explain the `generateStaticParams` function.

What is draft mode in Next.js?

How do you handle errors in Next.js App Router?

How do you co-locate styles using CSS Modules in Next.js?

What is `next/font`?

What is Parallel Routes in Next.js?

What is Intercepting Routes?

How can you disable static caching on a page?

Explore Related Tools

Publishing to Google Play

Machine Learning Tutorial

ASCII to Binary Converter

Binary to ASCII Converter

Binary to Octal Converter

Bulma Box Component – Simple Container with Shadow

Follow Us

Our Tools

Our Company

Special Tools