Question 1

next/font — how does it eliminate layout shift and external requests?

Accepted Answer

`next/font` self-hosts fonts at build, inlines `size-adjust` fallback metrics and subsets, removing Google Fonts requests and CLS.

Question 2

How do environment variables work in Next.js (the NEXT_PUBLIC_ prefix)?

Accepted Answer

Variables in .env are available on the server via process.env. Only those prefixed NEXT_PUBLIC_ are inlined into the client bundle and exposed to the browser — so never prefix secrets. Next.js loads .env.local/.env.production etc. by convention.

Question 3

How does client-side navigation work in Next.js (next/link and useRouter)?

Accepted Answer

next/link renders an anchor that does client-side navigation and prefetches the target route's code/data when it enters the viewport. useRouter()'s push/replace navigate programmatically. Both avoid full page reloads while keeping shared layouts mounted.

Question 4

How does file-based routing work in the Next.js App Router?

Accepted Answer

In the App Router, folders under app/ define URL segments and a page.js (or .tsx) makes that segment a publicly routable page. Special files (layout, loading, error, route) add behavior, and folder names like [id] create dynamic segments.

Question 5

next/font and next/image — how do they combine for Core Web Vitals?

Accepted Answer

Pair `next/image` (`priority`, `sizes`, `placeholder`) for LCP with `next/font` `size-adjust` fallbacks for CLS — both self-host and preload from your domain.

Question 6

What is Next.js and what problems does it solve?

Accepted Answer

Next.js is a React framework that adds server-side rendering, static generation, file-based routing, data fetching, bundling, and image/font optimization on top of React, so you ship fast, SEO-friendly full-stack apps without wiring all that infrastructure yourself.

Question 7

What is not-found.js in Next.js and how do you trigger a 404?

Accepted Answer

not-found.js renders the 404 UI for a segment, and calling the notFound() function from a Server Component (e.g. when a record is missing) renders the nearest not-found boundary and returns a 404 status.

Question 8

What is the difference between the /public folder and imported assets in Next.js?

Accepted Answer

Files in /public are served as-is from the root URL (e.g. /logo.png) with no processing — good for robots.txt, favicons. Imported assets (import img from './a.png') go through the build pipeline, get hashed filenames and optimization, and enable next/image features.

Question 9

How do you run Turbopack locally — `next dev --turbo` vs default?

Accepted Answer

`next dev --turbo` (now default in Next 15) gives sub-100ms HMR via persistent `.next/cache/turbo` — use `--show-config` or `TURBOPACK=1` to debug.

Question 10

Turbopack — why is it 10x faster than Webpack in Next.js 15?

Accepted Answer

Turbopack is Next.js's Rust-based incremental bundler — 5-10x faster cold start and HMR than Webpack by caching at the module-function level instead of rebuilding whole bundles.

NEXT.JSDECODED.

Transmission log

next/font — how does it eliminate layout shift and external requests?

How do environment variables work in Next.js (the NEXT_PUBLIC_ prefix)?

How does client-side navigation work in Next.js (next/link and useRouter)?

How does file-based routing work in the Next.js App Router?

next/font and next/image — how do they combine for Core Web Vitals?

What is Next.js and what problems does it solve?

What is not-found.js in Next.js and how do you trigger a 404?

What is the difference between the /public folder and imported assets in Next.js?

How do you run Turbopack locally — `next dev --turbo` vs default?

Turbopack — why is it 10x faster than Webpack in Next.js 15?

How do sitemap.ts and robots.ts work in Next.js?

What is the route segment config in Next.js (dynamic, revalidate, runtime)?

How do you handle forms with Server Actions in Next.js (progressive enhancement)?

Intercepting routes — how do you build an Instagram-style modal?

What is the difference between Server Components and Client Components in Next.js?

What is generateStaticParams in Next.js and how does it enable SSG for dynamic routes?

What is next/script and what are its strategy options in Next.js?

Server Components and external packages — what does `serverComponentsExternalPackages` do?

How does Next.js decide between static and dynamic rendering at build time?

Middleware in Next 15 — what breaks from the 14 upgrade?

What is the difference between static and dynamic rendering in the Next.js App Router?

Caching defaults in Next 15 — what is no longer cached by default?

What is the Data Cache in Next.js and how do you opt out of it?

What is the difference between getServerSideProps/getStaticProps and App Router data fetching?

What makes a route dynamic in the Next.js App Router?

Migrating Webpack config to Turbopack — what breaks?

What are dynamic routes and catch-all segments in Next.js?

How do you analyze and reduce bundle size in Next.js?

How does fetch caching work in the Next.js App Router (force-cache, no-store, revalidate)?

How do you fetch data in Next.js Client Components (SWR, React Query, use)?

App Router 15 — why are params and searchParams now Promises?

How do you revalidate data after a mutation in Next.js?

What are layouts and nested layouts in the Next.js App Router?

What is Middleware in Next.js and what can it do?

What is the difference between the App Router and the Pages Router?

How do you handle redirects and rewrites in Next.js?

How does next/image optimize images in Next.js?

How do Server Actions differ from Route Handlers in Next.js?

How does next/font work and why does it improve performance?

What is error.js in Next.js and how does error handling work in the App Router?

What is the difference between build-time and runtime environment variables in Next.js?

What is hydration in Next.js and what causes a hydration error?

What is Turbopack in Next.js and how does it compare to Webpack?

PPR vs ISR vs SSR — how do you pick the rendering strategy in Next 15?

instrumentation.ts — what changed for observability in Next 15?

What is request memoization in Next.js?

What is next.config.js in Next.js and what are common configurations?

What is on-demand revalidation in Next.js (revalidatePath / revalidateTag)?

How do you handle loading and error states for data fetching in Next.js?

How do you read request data and return responses in a Next.js Route Handler?

What is prefetching in Next.js and how does next/link prefetch routes?

How does code splitting and next/dynamic work in Next.js?

What is JSON-LD structured data and how do you add it in Next.js?

What are the special files in the Next.js App Router (page, layout, loading, error)?

How does the Metadata API work in Next.js (static and generateMetadata)?

What are Route Handlers in Next.js and how do they differ from Pages API routes?

What are the rendering strategies in Next.js (SSR, SSG, ISR, CSR)?

What is ISR (Incremental Static Regeneration) in Next.js and how do you implement it?

How do you pass data from Server Components to Client Components in Next.js?

next.config `reactCompiler` — should you enable the React Compiler?

What are route groups in Next.js and how do you use them?

What is loading.js in Next.js and how does Suspense streaming work?

How do you fetch data in Next.js Server Components?

How do you deploy a Next.js app (Vercel vs self-hosted)?

What is the difference between layout.js and template.js in Next.js?

How does Next.js handle SEO compared to a client-rendered SPA?

What runtimes does Next.js support (Node.js vs Edge runtime)?

What is the 'use client' directive and when do you need it?

What is the output: 'standalone' build in Next.js and when do you use it?

How does Next.js handle CSS (CSS Modules, global, Tailwind, CSS-in-JS)?

revalidateTag vs revalidatePath — when to use which?

How do you migrate from the Pages Router to the App Router in Next.js?

How do Server and Client Components compose in Next.js?

What are React Server Components and why does Next.js use them?

Observability with OpenTelemetry in Next 15 — how is OTEL wired?

What changed about caching defaults in Next.js 15?

How do you handle instrumentation and observability in Next.js (instrumentation.ts)?

How do you do optimistic updates in Next.js (useOptimistic, useActionState)?