Next.js Interview Questions and Answers 2026

Next.js is the most widely adopted React meta-framework, used for production web applications at scale. Candidates report that App Router architecture, React Server Components, data fetching patterns (SSR/SSG/ISR), middleware, and the difference between Server and Client Components are the most heavily tested topics in full-stack and frontend engineering interviews. This guide covers 50 questions from fundamentals to advanced patterns. Always confirm the Next.js version requirements for your target role on the official company careers portal.

Table of Contents

1. Next.js Fundamentals
2. App Router and Routing
3. React Server Components
4. Data Fetching Patterns
5. API Routes and Server Actions
6. Authentication and Middleware
7. Performance and Optimization
8. 5-Question Mock Test
9. Frequently Asked Questions

---

Next.js Fundamentals

Q1. What is Next.js and what problems does it solve over plain React? Easy

Next.js is a React framework that adds server-side rendering, static site generation, file-based routing, API routes, image optimization, font optimization, and a production build pipeline out of the box. Plain React is a UI library that requires manual setup of routing (React Router), data fetching strategies, code splitting, and SSR infrastructure (Express + ReactDOM.renderToString).

Key features Next.js provides:

• File-based routing (App Router with src/app/)
• Server-side rendering (SSR) and static generation (SSG) per-page or per-component
• Incremental Static Regeneration (ISR)
• Image optimization via <Image> component
• Font optimization via next/font
• Built-in TypeScript, ESLint, Tailwind support
• Middleware for edge-based request handling
• Server Actions for form handling

Q2. What is the App Router and how does it differ from the Pages Router? Easy

Feature	App Router (Next.js 13+)	Pages Router
Directory	src/app/	src/pages/
Default component type	Server Component	Client Component
Layouts	Nested, colocated	_app.js (single)
Data fetching	fetch() in components	getServerSideProps/getStaticProps
Streaming	Built-in (Suspense)	Not supported
Loading states	loading.js convention	Manual
Error boundaries	error.js convention	Manual
Parallel routes	Supported	Not supported

src/app/
  layout.tsx          # root layout
  page.tsx            # / route
  loading.tsx         # loading UI (automatic Suspense)
  error.tsx           # error boundary
  not-found.tsx       # 404 page
  blog/
    layout.tsx        # blog section layout
    page.tsx          # /blog
    [slug]/
      page.tsx        # /blog/:slug

Q3. What is the difference between Server Components and Client Components? Medium

Aspect	Server Component (default)	Client Component ('use client')
Renders	Server only	Server (hydration) + Client
JS sent to browser	No component code	Yes, full component
Data access	Direct DB, FS, secrets	Via API calls only
React hooks	Cannot use	Can use
Browser APIs	Cannot access	Can access
Interactivity	None	Full (events, state)
Bundle impact	Zero	Adds to client bundle

// ServerComponent.tsx (default - no directive needed)
import { db } from '@/lib/db'

export default async function UserList() {
  const users = await db.users.findMany() // direct DB access
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
}

// ClientComponent.tsx
'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0) // hooks work
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

Q4. How does Next.js file-based routing work with the App Router? Easy

Each folder in src/app/ maps to a URL segment. Special files define behavior:

File	Purpose
page.tsx	Publicly accessible route
layout.tsx	Shared UI for segment and children
loading.tsx	Automatic Suspense loading UI
error.tsx	Error boundary for the segment
not-found.tsx	404 for the segment
route.ts	API endpoint (no UI)
middleware.ts	Edge middleware (at root)

src/app/
  dashboard/
    layout.tsx      # wraps all dashboard pages
    page.tsx        # /dashboard
    settings/
      page.tsx      # /dashboard/settings
    @notifications/ # parallel route
      page.tsx      # rendered alongside dashboard
  (marketing)/      # route group (no URL segment)
    about/
      page.tsx      # /about (not /marketing/about)

Q5. What are dynamic route segments in Next.js App Router? Easy

app/
  blog/[slug]/page.tsx     → /blog/my-post (params.slug = 'my-post')
  shop/[...slug]/page.tsx  → /shop/a/b/c (params.slug = ['a','b','c'])
  [[...slug]]/page.tsx     → / or /a or /a/b (optional catch-all)

// app/blog/[slug]/page.tsx
interface Props {
  params: { slug: string }
  searchParams: { page?: string }
}

export default async function BlogPost({ params, searchParams }: Props) {
  const post = await getPost(params.slug)
  const page = Number(searchParams.page ?? 1)
  return <article>{post.content}</article>
}

// Static generation of dynamic routes
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({ slug: post.slug }))
}

---

App Router and Routing

Q6. How do layouts work in the App Router? Medium

Layouts persist across navigation within their segment. A root layout is required and wraps everything.

// app/layout.tsx - root layout (required)
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: { template: '%s | My App', default: 'My App' },
  description: 'My application'
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav>Global Nav</nav>
        {children}
      </body>
    </html>
  )
}

// app/dashboard/layout.tsx - nested layout
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="dashboard">
      <aside>Sidebar</aside>
      <main>{children}</main>
    </div>
  )
}

Layouts do NOT re-render on navigation between children; only page.tsx content changes.

Q7. What are loading.js and error.js conventions? Medium

// app/dashboard/loading.tsx
// Automatically wraps page.tsx in <Suspense fallback={<Loading />}>
export default function Loading() {
  return <div className="skeleton">Loading dashboard...</div>
}

// app/dashboard/error.tsx
// Automatically wraps in Error Boundary
'use client' // error components must be client components
import { useEffect } from 'react'

export default function Error({
  error,
  reset
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

reset() attempts to re-render the segment. error.digest is a hash for server-side error lookup without exposing details.

Q8. What are parallel routes and intercepting routes? Advanced

Parallel routes render multiple pages in the same layout simultaneously.

app/
  layout.tsx        # receives @team and @analytics slots
  @team/
    page.tsx
  @analytics/
    page.tsx
  page.tsx

// app/layout.tsx
export default function Layout({
  children,
  team,
  analytics
}: {
  children: React.ReactNode
  team: React.ReactNode
  analytics: React.ReactNode
}) {
  return (
    <>
      {children}
      {team}
      {analytics}
    </>
  )
}

Intercepting routes render a route in a different context (e.g., photo modal over current page, with full page on direct URL).

app/
  feed/
    page.tsx
  photos/
    [id]/
      page.tsx
  (.)photos/[id]/  # intercepts /photos/:id when navigating from same dir
    page.tsx       # renders as modal

---

React Server Components

Q9. How does data fetching work in Server Components? Medium

Server Components can use async/await directly. Next.js extends the native fetch API with caching behavior.

// app/posts/page.tsx
export default async function PostsPage() {
  // Cached by default (like SSG): revalidates on next deploy
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // ISR: revalidate every hour
  }).then(r => r.json())

  // No cache: like SSR (fresh per request)
  const user = await fetch('https://api.example.com/me', {
    cache: 'no-store'
  }).then(r => r.json())

  return (
    <>
      <h1>Posts for {user.name}</h1>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
    </>
  )
}

Q10. What is request memoization in Next.js? Advanced

Next.js automatically deduplicates identical fetch requests with the same URL and options within a single render pass. This means multiple Server Components fetching the same data only make one HTTP request.

// Both components call the same URL
// Next.js makes ONE fetch request and shares the result

async function getUser(id: string) {
  return fetch(`/api/users/${id}`).then(r => r.json())
}

// ComponentA.tsx - calls getUser('123')
// ComponentB.tsx - also calls getUser('123')
// Result: only one network request during this render

This is different from the Data Cache (persistent across requests) and Full Route Cache (persistent rendered output).

Q11. What is streaming and Suspense in Next.js App Router? Medium

Streaming sends HTML progressively from server to browser. Each <Suspense> boundary is a streaming chunk.

import { Suspense } from 'react'

export default function Dashboard() {
  return (
    <main>
      {/* This renders immediately */}
      <h1>Dashboard</h1>

      {/* Streams when ready */}
      <Suspense fallback={<StatsLoadingSkeleton />}>
        <Stats />  {/* async Server Component */}
      </Suspense>

      {/* Independent - streams independently */}
      <Suspense fallback={<FeedLoadingSkeleton />}>
        <Feed />
      </Suspense>
    </main>
  )
}

// Stats can take 2s, Feed 500ms - Feed renders first
async function Stats() {
  const data = await db.getComplexStats() // slow query
  return <StatsDisplay data={data} />
}

Q12. When should you NOT use Server Components? Medium

Do not use Server Components when you need:

1. React hooks (useState, useEffect, useContext, useReducer)
2. Browser APIs (window, localStorage, navigator, Web Workers)
3. Event listeners (onClick, onChange)
4. Class components
5. Third-party client-side libraries that access the DOM

The boundary pattern: keep Server Components at the leaves of the tree as much as possible, push 'use client' boundaries as far down as possible.

// Pattern: Server Component fetches, passes data to Client Component
// app/post/[id]/page.tsx
export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await getPost(params.id) // server: DB access
  return <PostEditor post={post} />     // client: rich editor
}

// PostEditor.tsx
'use client'
export function PostEditor({ post }: { post: Post }) {
  const [content, setContent] = useState(post.content)
  return <RichEditor value={content} onChange={setContent} />
}

---

Data Fetching Patterns

Q13. What is the difference between SSG, SSR, and ISR in Next.js? Medium

Pattern	When rendered	Caching	Use case
SSG	Build time	CDN, permanent	Blogs, docs, marketing
SSR	Per request	No (or short)	User dashboards, auth pages
ISR	Build + background revalidation	CDN, time-based	E-commerce, news
CSR	Browser	Client-side	Highly interactive, post-auth

// SSG: no dynamic data, cached forever (until redeploy)
export default async function StaticPage() {
  const data = await fetch('https://api.example.com/static', {
    cache: 'force-cache' // default
  }).then(r => r.json())
  return <div>{data.title}</div>
}

// ISR: revalidate every 60 seconds
export const revalidate = 60 // segment-level config
// Or per-fetch:
const data = await fetch(url, { next: { revalidate: 60 } })

// SSR: fresh per request
export const dynamic = 'force-dynamic'
// Or per-fetch:
const data = await fetch(url, { cache: 'no-store' })

Q14. How do you handle cookies and headers in Server Components? Medium

import { cookies, headers } from 'next/headers'

export default async function Page() {
  const cookieStore = await cookies()
  const session = cookieStore.get('session')?.value

  const headersList = await headers()
  const userAgent = headersList.get('user-agent')
  const ip = headersList.get('x-forwarded-for')

  if (!session) {
    redirect('/login')
  }

  const user = await getUserFromSession(session)
  return <Dashboard user={user} />
}

Note: accessing cookies() or headers() opts the route into dynamic rendering (SSR) because these are per-request values.

---

API Routes and Server Actions

Q15. What are Route Handlers in the App Router? Medium

Route Handlers replace Pages Router API routes. They live in route.ts files alongside pages.

// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const page = Number(searchParams.get('page') ?? 1)

  const users = await db.users.findMany({ skip: (page - 1) * 20, take: 20 })
  return NextResponse.json({ users, page })
}

export async function POST(request: NextRequest) {
  const body = await request.json()
  const user = await db.users.create({ data: body })
  return NextResponse.json(user, { status: 201 })
}

// app/api/users/[id]/route.ts
export async function GET(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  const user = await db.users.findUnique({ where: { id: params.id } })
  if (!user) return NextResponse.json({ error: 'Not found' }, { status: 404 })
  return NextResponse.json(user)
}

Q16. What are Server Actions and how do they work? Medium

Server Actions are async functions that run on the server, directly callable from Client Components. They replace traditional API endpoints for form submissions and mutations.

// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  const content = formData.get('content') as string

  // Validate
  if (!title || !content) {
    return { error: 'Title and content required' }
  }

  await db.posts.create({ data: { title, content } })
  revalidatePath('/blog')  // invalidate cached blog page
  redirect('/blog')        // redirect after mutation
}

// Client Component using the action
'use client'
import { createPost } from '@/app/actions'
import { useFormState, useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()
  return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>
}

export function PostForm() {
  const [state, action] = useFormState(createPost, null)
  return (
    <form action={action}>
      <input name="title" />
      <textarea name="content" />
      {state?.error && <p>{state.error}</p>}
      <SubmitButton />
    </form>
  )
}

Q17. What is the difference between revalidatePath and revalidateTag? Medium

Both invalidate the Next.js Data Cache, but at different granularities.

'use server'
import { revalidatePath, revalidateTag } from 'next/cache'

// revalidatePath: invalidates all cached data for a specific URL
revalidatePath('/blog')           // specific path
revalidatePath('/blog', 'page')   // just the page
revalidatePath('/blog', 'layout') // layout too

// revalidateTag: invalidates all fetches with a specific cache tag
revalidateTag('posts')            // all fetches tagged 'posts'

// Tagging fetches
const data = await fetch('/api/posts', {
  next: { tags: ['posts', 'homepage'] }
})

// When a new post is created:
revalidateTag('posts') // re-fetches everything tagged 'posts'

revalidateTag is more precise: one mutation can invalidate data across multiple pages that all share the same tag.

---

Authentication and Middleware

Q18. How does middleware work in Next.js? Medium

Middleware runs at the Edge before a request completes. It can rewrite, redirect, modify headers, or return responses.

// middleware.ts (root of project)
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { verifyToken } from '@/lib/auth'

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl

  // Auth check for protected routes
  if (pathname.startsWith('/dashboard')) {
    const token = request.cookies.get('token')?.value

    if (!token) {
      return NextResponse.redirect(new URL('/login', request.url))
    }

    const payload = await verifyToken(token)
    if (!payload) {
      return NextResponse.redirect(new URL('/login', request.url))
    }

    // Pass user info via header to Server Components
    const response = NextResponse.next()
    response.headers.set('x-user-id', payload.userId)
    return response
  }

  // Rewrite for A/B testing
  if (pathname === '/home') {
    const bucket = Math.random() > 0.5 ? 'a' : 'b'
    return NextResponse.rewrite(new URL(`/home-${bucket}`, request.url))
  }

  return NextResponse.next()
}

// Control which paths middleware runs on
export const config = {
  matcher: ['/dashboard/:path*', '/home', '/api/:path*']
}

Q19. How do you implement authentication with NextAuth.js (Auth.js)? Advanced

// auth.ts (root)
import NextAuth from 'next-auth'
import GitHub from 'next-auth/providers/github'
import Credentials from 'next-auth/providers/credentials'

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    GitHub,
    Credentials({
      async authorize(credentials) {
        const user = await verifyCredentials(credentials)
        return user ?? null
      }
    })
  ],
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user
      const isProtected = nextUrl.pathname.startsWith('/dashboard')
      if (isProtected && !isLoggedIn) return false
      return true
    },
    session({ session, token }) {
      session.user.id = token.sub!
      return session
    }
  }
})

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth'
export const { GET, POST } = handlers

// In Server Component
import { auth } from '@/auth'
const session = await auth()
if (!session) redirect('/login')

// In middleware (faster edge auth)
export { auth as middleware } from '@/auth'

---

Performance and Optimization

Q20. What is the Next.js Image component and why use it? Easy

next/image provides automatic image optimization: WebP/AVIF conversion, lazy loading, size optimization, blur placeholder, and prevention of layout shift.

import Image from 'next/image'

// Local image (dimensions inferred)
import heroImage from '@/public/hero.jpg'
<Image src={heroImage} alt="Hero" priority />

// Remote image (explicit dimensions required)
<Image
  src="https://cdn.example.com/photo.jpg"
  alt="Product photo"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

// Fill mode (parent must have position: relative)
<div style={{ position: 'relative', height: '400px' }}>
  <Image src={src} alt="Cover" fill style={{ objectFit: 'cover' }} />
</div>

Must whitelist remote domains in next.config.js:

images: {
  remotePatterns: [{ protocol: 'https', hostname: 'cdn.example.com' }]
}

Q21. How does next/font work? Easy

next/font automatically self-hosts fonts with zero layout shift, no external network requests, and optimal loading.

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'
import localFont from 'next/font/local'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap'
})

const myFont = localFont({
  src: '../public/fonts/MyFont.woff2',
  variable: '--font-my'
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${myFont.variable}`}>
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Q22. What is next/dynamic and when do you use it? Medium

next/dynamic is Next.js's code-splitting wrapper. It lazy-loads components, reducing the initial JavaScript bundle.

import dynamic from 'next/dynamic'

// Lazy-load a heavy component
const HeavyEditor = dynamic(() => import('@/components/HeavyEditor'), {
  loading: () => <p>Loading editor...</p>,
  ssr: false  // disable SSR for browser-only components
})

// Named exports
const { Chart } = dynamic(() =>
  import('recharts').then(mod => ({ default: mod.LineChart }))
)

// Use when:
// 1. Large third-party libraries (charts, maps, editors)
// 2. Browser-only components (window access)
// 3. Components only needed on user interaction (modals)

Q23. What caching layers does Next.js have? Advanced

Next.js has four distinct caching mechanisms:

Cache	What it stores	Duration	Invalidation
Request Memoization	fetch() results in render	Single request	Automatic per request
Data Cache	fetch() results	Persistent	revalidateTag, revalidatePath, time-based
Full Route Cache	HTML + RSC payload	Persistent	revalidate, dynamic = 'force-dynamic'
Router Cache	RSC payload client-side	Session / 30s-5min	router.refresh(), server actions

// Opt out of all caching for a route
export const dynamic = 'force-dynamic'
export const revalidate = 0

// Opt out per fetch
fetch(url, { cache: 'no-store' })

// Tag-based invalidation
fetch(url, { next: { tags: ['user-data'] } })
// Later:
import { revalidateTag } from 'next/cache'
revalidateTag('user-data')

Q24. How do you configure bundle analysis and reduce bundle size in Next.js? Advanced

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
})

module.exports = withBundleAnalyzer({
  // Optimize imports (tree-shake component libraries)
  modularizeImports: {
    'lodash': { transform: 'lodash/{{member}}' },
    '@mui/icons-material': { transform: '@mui/icons-material/{{member}}' }
  },
  // Exclude server-only packages from client bundle
  experimental: {
    optimizePackageImports: ['@headlessui/react', 'lucide-react']
  }
})

Strategies for bundle reduction:

1. Use next/dynamic with ssr: false for heavy client-only deps
2. Prefer server-side data fetching to avoid client-side libraries
3. Use barrel file tree-shaking with sideEffects: false
4. Check for accidental client bundling of server-only code with server-only package

Q25. What is generateMetadata and static metadata? Easy

// Static metadata
export const metadata: Metadata = {
  title: 'My Page',
  description: 'Page description',
  openGraph: { images: ['/og-image.jpg'] }
}

// Dynamic metadata
export async function generateMetadata(
  { params }: { params: { slug: string } }
): Promise<Metadata> {
  const post = await getPost(params.slug) // deduped with page data fetch

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      images: [post.coverImage]
    },
    alternates: {
      canonical: `https://example.com/blog/${params.slug}`
    }
  }
}

---

5-Question Mock Test

Q1. What is the difference between Server Components and Client Components? When would you use each?

Q2. Explain the three caching strategies in Next.js data fetching. How do you force SSR on a page that defaults to static rendering?

Q3. What are Server Actions? Write a Server Action that creates a user from a form submission and revalidates the users list page.

Q4. What happens when you call revalidatePath('/blog') from a Server Action?

Q5. What is the purpose of Next.js middleware and how does it differ from a Route Handler?

Answers:

A1. Server Components render server-only, zero JS in browser bundle, can use DB/FS/secrets directly, no hooks/events. Client Components (marked 'use client') run on both server and client, support hooks and event handlers. Use SC for data fetching and static rendering; use CC for interactivity.

A2. force-cache (default) = SSG-like, persistent cache. { next: { revalidate: N } } = ISR, revalidate after N seconds. no-store = SSR, fresh per request. To force SSR: export const dynamic = 'force-dynamic' at segment level or cache: 'no-store' on any fetch.

A3. Mark with 'use server', receive FormData, validate, call DB, then revalidatePath('/users') and optionally redirect('/users').

A4. Next.js invalidates the Full Route Cache and Data Cache for /blog. The next request regenerates the page fresh from the server, including re-running any cached fetches for that path.

A5. Middleware runs at the Edge before routing, ideal for auth redirects, A/B testing, header injection. Route Handlers are API endpoints that return data responses. Middleware runs on every matching request; Route Handlers only when that specific URL is called.

---

Frequently Asked Questions

When should I use Next.js vs plain React?

Use Next.js when you need SEO (SSR/SSG), performance optimization (image/font/code splitting), a built-in API layer, or file-based routing. Use plain React (with Vite) for SPAs behind authentication where SEO is not a concern and you want minimal framework overhead.

What is the difference between App Router and Pages Router?

App Router (Next.js 13+) uses React Server Components, enables streaming, supports nested layouts per route segment, and uses conventions (loading.js, error.js) for loading and error states. Pages Router treats all components as Client Components by default and uses getServerSideProps/getStaticProps for server-side data. App Router is the current standard; Pages Router is maintained for backward compatibility.

What is ISR and when is it better than SSR?

ISR (Incremental Static Regeneration) pre-renders pages at build time and revalidates them in the background after a set interval. It serves cached (fast, CDN-delivered) responses while regenerating stale pages. Better than SSR when content changes infrequently (news, product listings) and you want the performance of static serving with reasonably fresh data. SSR is needed when data must be fresh on every request (personalized content, real-time prices).

What is the internal mesh of related topics?

• React Interview Questions 2026 - core React concepts underlying Next.js
• Vue.js Interview Questions 2026 - compare SSR approaches (Next.js vs Nuxt)
• JavaScript Interview Questions 2026 - async/await, Promises, closures fundamentals
• TypeScript Interview Questions 2026 - typed Next.js components and server actions