Question 1

What is Next.js and how does its file-based routing system work in the App Router?

Accepted Answer

Next.js is a production-ready React framework created by Vercel. In Next.js 13+, the App Router uses the filesystem to define route paths. Any folder nested inside the `app/` directory automatically becomes a URL path segment. Special files are used: `page.tsx` defines the UI at that route, `layout.tsx` defines a shared persistent wrapper, `loading.tsx` defines a fallback UI using Suspense, and `error.tsx` acts as an error boundary. Dynamic routes use brackets: `app/blog/[id]/page.tsx` maps to `/blog/123`, passing the parameter to page props.

Question 2

Explain the difference between Static Site Generation (SSG) and Server-Side Rendering (SSR) in Next.js.

Accepted Answer

Static Site Generation (SSG) builds HTML pages at build time. These pages are cached on a CDN, resulting in extremely fast load times (TTFB). Server-Side Rendering (SSR) generates HTML on the server at request time for every incoming request, which is ideal for dynamic, user-specific data. In the App Router, SSG is achieved by default for static pages, while SSR is triggered by calling dynamic APIs (like `cookies()` or `headers()`) or setting `force-dynamic` route segment options.

Question 3

What is Incremental Static Regeneration (ISR) and how do you configure it?

Accepted Answer

ISR allows you to update static pages after you have built your site, without rebuilding the entire application. It combines the speed of SSG with fresh data. You configure it by setting the revalidate property on fetch requests or using route segment configuration:
```typescript
export const revalidate = 3600; // revalidate every hour
```
When a request comes in, the cached static page is served. After the revalidation period, a background build updates the cache, ensuring sub-second response times with fresh updates.

Question 4

What are React Server Components (RSC) and why are they the default in App Router?

Accepted Answer

RSC allows components to render on the server and stream pre-compiled structure to the browser. They are the default in App Router because they keep client bundle sizes zero (server-only npm modules are not sent to the client), allow secure direct database queries, and reduce client-side rendering waterfalls by loading data closer to the database.

Question 5

Explain the purpose of the next/image component and its optimization benefits.

Accepted Answer

The `next/image` component optimizes images automatically to improve Web Vitals (specifically Largest Contentful Paint). It automatically serves images in modern formats (WebP/AVIF), resizes images based on viewport sizes, prevents cumulative layout shift (CLS) by requiring explicit dimensions or layout placeholders, and lazy-loads images outside the viewport.

Question 6

What is the next/link component and how does it optimize routing?

Accepted Answer

The `next/link` component wraps standard HTML anchor tags to enable client-side navigation. It optimizes routing by prefetching code and data for the linked page in the background as soon as the link enters the viewport, making page transitions feel instantaneous when the user clicks.

Question 7

What are Route Handlers in Next.js and how do you write one?

Accepted Answer

Route Handlers let you create custom request handlers for a given route using the Web Request and Response APIs. They are the App Router equivalent of API routes. You write them by exporting HTTP verbs (GET, POST, etc.) from a `route.ts` file:
```typescript
export async function GET(request: Request) {
  return Response.json({ message: "Hello World" });
}
```

Question 8

How do you handle loading states in Next.js using loading.tsx?

Accepted Answer

Next.js automatically wraps the page component inside a React Suspense boundary when a `loading.tsx` file is defined in the folder. While the page component is resolving its asynchronous data, the layout remains interactive and the fallback UI inside `loading.tsx` (like a skeleton loader) is displayed.

Question 9

How do you handle errors in Next.js using error.tsx?

Accepted Answer

Next.js uses `error.tsx` as a React Error Boundary to catch unexpected exceptions in nested pages and layouts. It must be a Client Component ('use client') and receives the error object and a `reset()` function to try to recover. If a layout fails, `error.tsx` isolates the crash, keeping the rest of the application active.

Question 10

What is the next/font component and how does it prevent Layout Shift?

Accepted Answer

The `next/font` component optimizes web fonts by downloading font files at build time and hosting them statically with the application. It injects CSS variables to pre-calculate font dimensions, avoiding the flash of unstyled text (FOUT) and preventing layout shifts during page loading.

Question 11

Explain dynamic routing parameters and how to parse them in App Router.

Accepted Answer

Dynamic routing parameters are defined by wrapping a folder name in square brackets, such as `[id]`. In the corresponding `page.tsx` component, you parse the values from the dynamic parameters passed as params: `export default async function Page({ params }: { params: Promise<{ id: string }> })`.

Question 12

What is the purpose of the public/ folder in Next.js?

Accepted Answer

The `public/` directory stores static assets like images, robots.txt, icons, and fonts. Assets inside this folder are mapped directly to the root path of the application (e.g., `public/logo.png` is served at `/logo.png`) and can be cached effectively on CDNs.

Question 13

How do you configure absolute imports and path aliases in a Next.js project?

Accepted Answer

Absolute imports and path aliases are configured in `tsconfig.json` or `jsconfig.json` under `compilerOptions.paths`. This maps folders (e.g., `@/components/*` to `components/*`), making imports clean and independent of relative folder depths.

Question 14

What is dynamic metadata in Next.js and how do you generate it?

Accepted Answer

Dynamic metadata is generated by exporting a `generateMetadata` function from a `page.tsx` file. Next.js calls this function with route parameters, allowing you to fetch SEO information dynamically and return titles, descriptions, and OpenGraph tags.

Question 15

Explain how to configure custom HTTP headers in Next.js.

Accepted Answer

Custom HTTP headers are configured in `next.config.js` under the `headers()` function. This lets you attach security headers (like Content Security Policy, CORS, X-Frame-Options) to specific path matching patterns.

Question 16

What is runtime configuration in Next.js and when is it useful?

Accepted Answer

Runtime configuration enables exposing variables to server and client environments. In the App Router, it is preferred to use environment variables prefixed with `NEXT_PUBLIC_` for client access, and standard environment variables for secure server-only operations.

Question 17

How do you configure redirect paths in Next.js?

Accepted Answer

Redirect paths can be configured in `next.config.js` using the `redirects()` method, inside `middleware.ts` for dynamic session redirects, or using the `redirect()` helper inside Server Components and Server Actions.

Question 18

Explain layout nesting in Next.js App Router.

Accepted Answer

Layouts nest automatically. The root `app/layout.tsx` wraps all pages. A subfolder layout like `app/blog/layout.tsx` wraps only routes nested within `/blog`. Children pages render inside the parent layout's `{children}` container.

Question 19

How do you render script tags securely in Next.js?

Accepted Answer

Use the `next/script` component. It includes optimization strategies: `beforeInteractive` for crucial scripts, `afterInteractive` (default) to load after page hydration, and `lazyOnload` for non-critical third-party widgets.

Question 20

What is the route segment configuration property?

Accepted Answer

Route segment options are configuration variables exported from pages or layouts (e.g. `export const dynamic = 'force-dynamic'`, `export const revalidate = 0`), which control caching, dynamic runtime setups, and rendering behaviors.

Question 21

What are React Server Actions and how do you implement them?

Accepted Answer

Server Actions are asynchronous RPC (Remote Procedure Call) endpoints defined with the 'use server' directive. They allow client-side components to call backend server actions directly like simple JavaScript functions, handling forms, mutations, and database updates without manual REST endpoint development.

Question 22

How do you test Server Actions and layout configurations in Next.js applications?

Accepted Answer

Testing in Next.js requires separating server actions from the components that call them. Since Server Actions are fundamentally asynchronous RPC API endpoints, you can write integration tests that trigger them directly in Node, mock databases, and verify return values. For components that invoke Server Actions, mock router hooks from `next/navigation` and wrap actions in async blocks. For layout checks, Playwright is preferred to assert real routing updates.

Question 23

Explain Next.js middleware and its execution lifecycle.

Accepted Answer

Middleware runs before a request is completed, allowing you to modify requests and responses. It runs on the Edge runtime, executing after routing matches but before static files and page data are served, making it ideal for checking auth tokens, injecting headers, and handling localized redirects.

Question 24

How does the Next.js cache invalidate, and what is revalidation?

Accepted Answer

Next.js uses a multi-level cache (Data Cache, Full Route Cache, Router Cache). You invalidate the Data Cache using time-based revalidation (e.g. `fetch(url, { next: { revalidate: 60 } })`) or on-demand revalidation using `revalidatePath('/blog')` or `revalidateTag('posts')` inside Server Actions.

Question 25

Explain Next.js routing prefetching and how to disable it.

Accepted Answer

Next.js automatically prefetches code and data for routes matching `next/link` components that enter the viewport. To disable prefetching for specific elements (e.g. settings pages that are rarely visited), set the prefetch prop to false: `<Link href="/settings" prefetch={false}>`.

Question 26

What is the difference between CSS Modules and Tailwind CSS in Next.js?

Accepted Answer

CSS Modules scope CSS locally to the component to prevent class name conflicts, compiled into scoped selectors. Tailwind CSS is a utility-first utility class library compiled into a single optimized utility stylesheet, reducing total CSS volume in large projects.

Question 27

How do you fetch dynamic headers and cookies inside Server Components?

Accepted Answer

Import and execute the `headers()` or `cookies()` functions from `next/headers`. Calling these functions dynamically opts the parent route into dynamic rendering, causing the page to compile at request time.

Question 28

How do you optimize next/font configurations for custom assets?

Accepted Answer

Load fonts locally using `localFont` from `next/font/local` and specify src path arrays. This downloads, optimizes, and embeds font binaries inside the pre-rendered styles, preventing layouts from flickering or flashing default fonts.

Question 29

What are dynamic routing paths and how do you generate them statically?

Accepted Answer

Dynamic paths are statically pre-rendered using `generateStaticParams()`. This exports a list of route params at build time, letting Next.js pre-compile dynamic pages (like `/blog/[id]`) into static HTML files.

Question 30

How do you build custom API endpoints inside Next.js?

Accepted Answer

Create a `route.ts` file within a path folder in the `app/` directory and export standard HTTP handlers. These handlers receive requests and return standard `Response` objects, which is useful for handling third-party webhooks.

Question 31

What is next-auth and how does it integrate into App Router?

Accepted Answer

NextAuth.js is an authentication solution for Next.js. In the App Router, it uses Route Handlers under `/api/auth/[...nextauth]` to handle OAuth providers, credentials signin, session cookies, and authorization checks.

Question 32

Explain how image loaders configure custom CDN storage.

Accepted Answer

By default, Next.js optimizes images using the local server. For high traffic, configure custom image loaders in `next.config.js` to delegate image transformation tasks to specialized CDNs like Cloudinary, Imgix, or Akamai.

Question 33

How do you test client components using mocked hook frameworks?

Accepted Answer

Use React Testing Library. Mock next/navigation hooks using `vi.mock('next/navigation', ...)` to return mock routers, pathnames, and search parameters, allowing components to run and test actions predictably.

Question 34

Explain how to handle nested error boundaries inside App Router.

Accepted Answer

Next.js wraps components in hierarchy boundaries. If an error is thrown in a page, it is caught by `error.tsx` in the local folder. If that folder lacks one, the error bubbles up to the next parent folder's boundary, terminating at `global-error.tsx`.

Question 35

How do you configure dynamic redirect paths using Middleware?

Accepted Answer

Check cookies or session headers inside `middleware.ts`. If unauthorized, return a redirect response using `NextResponse.redirect(new URL('/login', request.url))`, intercepting user requests before page rendering.

Question 36

How does CSS module structure compile under dynamic routes?

Accepted Answer

Webpack extracts module imports into scoped styles, appending unique hash IDs to class names. During dynamic route loading, only the CSS modules mapped to active page components are loaded, maximizing download speeds.

Question 37

What is Next.js instrumentation and when is it useful?

Accepted Answer

Instrumentation (`instrumentation.ts` at the root) runs code once at server startup. It is useful for bootstrapping monitoring tools, initializing connection pools, and registering OpenTelemetry hooks.

Question 38

Explain the difference between fetch cache options in Next.js.

Accepted Answer

In Next.js, `fetch` defaults to caching requests. You configure caching options using: `cache: 'force-cache'` (caching data indefinitely), `cache: 'no-store'` (fetching data dynamically on every request), or setting revalidation bounds.

Question 39

How do you measure Web Vitals in Next.js components?

Accepted Answer

Use the `useReportWebVitals` client hook. It passes metrics (FCP, LCP, CLS) to a callback function, enabling telemetry metrics export to third-party dashboards like Datadog or Vercel Speed Insights.

Question 40

What is static exports in Next.js and when is it configured?

Accepted Answer

Static exports (`output: 'export'` in config) compiles Next.js into a folder containing static HTML, CSS, and JS assets. It is useful when hosting on static providers (S3, GitHub Pages), but disables dynamic features like Server Actions.

Next.js Interview Questions for Freshers (2026)

What is Next.js and Why is it Critical in Modern Engineering?

Next.js Lifecycle Visualizer

Core Architectural Concepts in Next.js

App Router Routing

Static and Dynamic Rendering

Caching Invalidation

Server Actions Security

Partial Prerendering

check_circleWhy Modern Companies Choose Next.js

lightbulbStrategic Preparation Tips

errorCrucial Mistakes to Avoid

trending_upHiring Trends & Career Outlook (2026)

Basics