Next.js Interview Questions

Export metadata object or generateMetadata async in layout/page. Sets title, description, openGraph, twitter, robots. Server-only; reflects per route.

export const metadata = { title: 'Blog', description: '...' };

• generateMetadata dynamic?
• metadataBase?
• JSON-LD?

• Client component exporting metadata
• Duplicate titles in layout+page confusion
• Missing OG image

Add generateMetadata for blog slug pages with post title.

layout.tsx wraps child segments; persists across navigation within segment. Root layout has html/body. Nested layouts for dashboard shell. Accept children and optional parallel slots.

export default function Layout({ children }) {
  return <section><Sidebar />{children}</section>;
}

• layout vs template?
• Fetching in layout?
• Multiple root layouts?

• Putting page-only state in layout
• Missing children render
• Client layout forcing all children client

Dashboard layout with sidebar wrapping all /dashboard/* pages.

Automatic Suspense boundary for route segment. Shows instant loading UI while server component data loads. Can nest per folder.

export default function Loading() {
  return <p>Loading...</p>;
}

• loading vs suspense manual?
• Skeleton patterns?
• Affects SEO?

• One global spinner only
• Heavy loading component
• Confusing with client loading states

Add skeleton loading.tsx for slow product list route.

Client Component boundary catches errors in child segments. Shows fallback UI; reset() retries. error.js does not catch layout errors in same segment — place thoughtfully.

'use client';
export default function Error({ error, reset }) {
  return <button onClick={reset}>Try again</button>;
}

• error vs global-error?
• Logging errors?
• notFound()?

• No error boundary
• Throwing in error.tsx
• Expecting to catch event handler errors

error.tsx on checkout with retry and support link.

Server-only vars without prefix. NEXT_PUBLIC_ inlined into client bundle — never put secrets there. Use .env.local, .env.production. Access process.env in server components and route handlers.

DATABASE_URL=postgres://...
NEXT_PUBLIC_API_URL=https://api.example.com

• Runtime env on Vercel?
• Edge vs Node env?
• .env loading order?

• NEXT_PUBLIC_DATABASE_URL
• Secrets in client fetch headers visible
• No .env.example

List which vars are server-only in your deployment.

Connect Git repo; auto builds on push. Detects Next config, serverless functions for API/route handlers, edge for middleware. Set env vars in dashboard. Preview deployments per PR.

git push origin main  # triggers production deploy

• Self-hosting?
• Docker?
• Build output standalone?

• Wrong Node version
• Missing env in preview
• Ignoring build errors in CI

Describe your Vercel project settings and preview URL workflow.

Serve cached static page, after revalidate seconds regenerate in background on next request. Pages Router: revalidate in getStaticProps. App Router: fetch revalidate or route segment config.

return { props: { data }, revalidate: 60 };

• On-demand revalidation?
• stale-while-revalidate behavior?
• ISR vs SSR cost?

• revalidate 0 misunderstanding
• ISR for highly sensitive real-time data
• No cache invalidation strategy

News homepage revalidates every 60 seconds.

Bracket folder [id] or [slug]. Page receives params (async in App Router 15). generateStaticParams prebuilds subset; dynamicParams controls unknown paths.

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

• Optional segments [[id]]?
• Type-safe params?
• generateStaticParams?

• Not awaiting params in Next 15
• No notFound() for missing id
• Slug injection

Product page at /products/[sku] with DB lookup.

Catch-all […slug] matches one or more segments. Optional [[…slug]] matches zero or more. params.slug is array of segments.

app/docs/[...slug]/page.tsx  →  /docs/a/b/c

• Difference from dynamic single?
• Priority with static routes?
• i18n routing?

• Wrong bracket count
• Not handling empty slug
• Conflicting routes

Docs site where all paths under /docs/* render one page component.

Downloads and self-hosts Google/fonts at build time, no layout shift with size-adjust, subsets, CSS variables for Tailwind integration.

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

• localFont?
• Variable fonts?
• FOIT/FOUT?

• External Google link in head instead
• Loading too many weights
• Wrong className application

Apply next/font in root layout for body text.

Loads external scripts with strategy: afterInteractive, lazyOnload, beforeInteractive, worker. Avoids blocking main thread unnecessarily.

import Script from 'next/script';
<Script src="https://analytics.example.com/script.js" strategy="afterInteractive" />

• Partytown?
• Inline scripts?
• GDPR/consent?

• Raw script in head for analytics
• beforeInteractive everywhere
• Duplicate script loads

Load analytics with afterInteractive after consent.

Hydration attaches React event listeners to server HTML. Mismatch if server HTML !== client first render (Date.now, random, browser-only APIs in SSR). Fix: render same on server/client or use useEffect for client-only bits.

// bad: {typeof window !== 'undefined' && ...} causing mismatch

• suppressHydrationWarning?
• Streaming hydration?
• RSC reducing hydration?

• Math.random in SSR markup
• Invalid HTML nesting (p inside p)
• Extensions modifying DOM

Fix a hydration warning from rendering locale date on server vs client.

Choose when you need SEO, mixed rendering (SSG/SSR), file-based routing, image/font optimizations, or full-stack React with API routes. Skip for purely internal SPA with no SEO and simple hosting needs.

Marketing + app + blog → Next | Admin SPA only → maybe Vite

• Next vs Remix?
• Next vs Astro?
• Mobile app?

• Next for everything
• Ignoring team familiarity
• Overkill for static 3-page site without using SSG

Defend why your portfolio is Next vs CRA/Vite.

Pros: rendering flexibility, ecosystem, Vercel integration, conventions. Cons: complexity (RSC, caching), vendor coupling perception, build times at scale, learning curve, deployment opinions.

Caching mental model + server/client split = learning cost

• Lock-in?
• Cold starts?
• Monorepo?

• Ignoring caching surprises
• Assuming all pages must be server components
• No static export when needed

Name one thing that surprised you learning App Router caching.

File in pages/api/hello.js exports default function handler(req, res). Method check on req.method. res.status(200).json({}).

export default function handler(req, res) {
  if (req.method === 'GET') res.status(200).json({ ok: true });
}

• Body parsing?
• Edge API routes?
• Migration to route.ts?

• No method guard
• CORS not set for external callers
• Mixing App and Pages API paths confusingly

Compare pages/api to app/api/route.ts in your words.

Time-based: fetch { next: { revalidate: N } } or export const revalidate = N. On-demand: revalidatePath/revalidateTag after mutations (Server Actions or route handlers).

import { revalidatePath } from 'next/cache';
revalidatePath('/posts');

• cache tags?
• no-store?
• dynamic = ‘force-dynamic’?

• Expecting instant updates with long revalidate
• Not tagging related fetches
• force-dynamic everywhere killing performance

After creating a post, call revalidatePath(‘/blog’).

‘use server’ functions called from forms or events; run on server; integrate with revalidation. Progressive enhancement with form action.

'use server';
export async function createPost(formData) {
  await db.post.create(...);
  revalidatePath('/blog');
}

• Security CSRF?
• vs Route Handlers?
• Serialization?

• Exposing sensitive logic without auth check
• Large payloads via actions
• Mixing client and server files wrongly

Contact form submitting via Server Action instead of client POST.

Call notFound() in server component when resource missing; renders not-found.tsx in that segment. HTTP 404. Can be nested per route.

import { notFound } from 'next/navigation';
if (!post) notFound();

• notFound vs error?
• global not-found?
• Metadata on 404?

• return null instead of 404
• Generic site-wide 404 only
• notFound in client component incorrectly

Product page calls notFound() when SKU missing.

export const dynamic = ‘force-dynamic’ opts out of static caching — always server-render. force-static forces static where possible. Use when defaults guess wrong.

export const dynamic = 'force-dynamic';

• Relation to fetch cache?
• cookies() forcing dynamic?
• generateStaticParams interaction?

• force-dynamic everywhere
• Surprised cookies opt into dynamic
• Not documenting why override set

Dashboard with cookies uses dynamic; marketing page stays static.