Next.js Interview Mastery

AnswerNext.js is a React-based full-stack framework that provides server-side rendering, static generation, routing, API routes, and performance optimizations out of the box.

AnswerKey advantages include built-in routing, SSR/SSG support, integrated backend APIs, and out-of-the-box performance optimizations (Image, Font, Script).

AnswerApp Router is the modern routing system in Next.js (introduced in v13) that uses folder-based routing, React Server Components (RSC), and nested layouts for better state management and performance.

AnswerRouting is determined by the folder structure within the /app directory. For example, /app/about/page.js corresponds to the /about route.

AnswerRoutes that use dynamic segments. For example, /app/blog/[id]/page.js matches /blog/123, /blog/abc, etc.

AnswerLayouts (layout.js) are shared UI components that wrap pages. They preserve state during navigation and can be nested to create hierarchical UI structures.

AnswerThe App Router uses React Server Components by default, supports nested layouts, and simplifies data fetching. Pages Router relies on getServerSideProps/getStaticProps and a flatter layout structure.

AnswerComponents that run only on the server. No JavaScript is sent to the client, resulting in faster initial loads and zero impact on bundle size.

AnswerComponents that run in the browser. They allow for interactivity, event listeners, and browser APIs.

AnswerUse it when you need interactivity (onClick, onChange), React Hooks (useState, useEffect), or Browser-only APIs (window, localStorage).

Answer❌ No. useState, useEffect, and other interactive hooks are strictly client-side only.

AnswerIt's the process where React in the browser takes the static HTML rendered on the server and attaches event listeners/state to make it an interactive application.

AnswerThis happens when the HTML generated on the server doesn't match the first render on the client (e.g., using new Date() or window.innerWidth directly in the JSX).

AnswerSSR (Server-Side Rendering) generates HTML on every request for SEO and performance. CSR (Client-Side Rendering) downloads JS and renders in the browser for snappy transitions after the initial load.

AnswerISR allows you to update static pages after you've built your site. You can revalidate specific pages in the background without needing a full rebuild.

AnswerYou can use the native fetch API directly inside async Server Components.

const data = await fetch(url);

AnswerNext.js extends fetch to include caching options: 'force-cache' (default), 'no-store' (dynamic), and revalidation duration.

AnswerSet constant revalidation time for a route or specific fetch call.

fetch(url, { next: { revalidate: 60 } });

AnswerAllows you to purge specific cache entries across your entire app by assigning tags to fetch requests.

fetch(url, { next: { tags: ["products"] } });

// To purge:
import { revalidateTag } from "next/cache";
revalidateTag("products");

AnswerRoute params are available as a promise in the props of a Page component.

async function Page({ params }) {
  const { id } = await params;
}

AnswerQuery params (searchParams) are also available as a promise in Page props.

async function Page({ searchParams }) {
  const { category } = await searchParams;
}

Answeruse() is a React hook used to unwrap promises (like params or searchParams) in Client Components.

const { id } = use(params);

AnswerDemonstrates fetching data based on a dynamic slug.

async function Page({ params }) {
  const { id } = await params;
  const res = 
   await fetch(`https://api.com/blog/${id}`);
  const data = await res.json();

  return <div>{data.title}</div>;
}

AnswerUse useEffect to ensure dynamic client-only data (like timestamps) is only rendered after hydration.

"use client";

function Time() {
  const [time, setTime] = useState(null);
  useEffect(() => {
    setTime(new Date().toString());
  }, []);

  return <p>{time}</p>;
}

AnswerVia Server Components (reduced JS), Automatic Code Splitting, Image/Font Optimization, and sophisticated Edge Caching.

AnswerStreaming allows you to break down the page's HTML into smaller chunks and progressively send them from the server to the client. This allows 'instant' loading of headers while slower data-heavy components load via Suspense.

AnswerProduct pages should use SSG/ISR for speed. Reviews should use ISR for periodic updates. The Cart and User Profile must use SSR/Client-side fetching for real-time personalization.

AnswerNext.js is 'Frontend-first Fullstack'. While it can handle full backend logic (Route Handlers, Server Actions, DB connections), it's optimized for UI-adjacent logic. For heavy business logic, high-performance computing, or shared services, a dedicated backend (Go, Python, Java) is often preferred.

Answer1. Separation of Concerns: Decoupling UI from business logic. 2. Scalability: Microservices allow scaling a Go backend independently of the Next.js frontend. 3. Legacy: Plugging a modern frontend into an existing enterprise API.

AnswerBecause Next.js solves 'The Production Problem'. It provides SEO (SSR), performance (SSG), and file-system routing out of the box. Building these from scratch in pure React requires massive configuration and maintenance.

Answer1. Internal tools/Admin panels where SEO is irrelevant. 2. Highly specific custom architectures where Next.js's opinionated routing is restrictive. 3. When you need absolute control over the build pipeline.

Answer1. Performance (Core Web Vitals). 2. Accessibility (a11y). 3. Responsiveness. 4. Consistent Design System. 5. Efficient State Management.