Next.js

The Next.js 15 App Router on one page, with the Pages Router equivalents interviewers still ask about. Checked against a Next.js 15.5 build with React 19.

App Router file conventions

Nesting order inside a segment: layout > template > error > loading > not-found > page.

Server vs Client Components

• 'use client' marks a module boundary: everything that file imports becomes client code.
• Client code cannot import a Server Component, but can render one passed as children.
• Props crossing the boundary must be serializable. Functions fail (“Event handlers cannot be passed to Client Component props”) unless they are Server Actions.
• next/dynamic with ssr: false must be called inside a Client Component in Next.js 15.

Static vs dynamic rendering

A route becomes dynamic when it uses cookies(), headers(), draftMode(), connection(), searchParams, a fetch with cache: 'no-store', or dynamic = 'force-dynamic'. A plain fetch does not: the route is still prerendered and the result frozen until revalidation.

export const dynamic = 'auto';      // 'force-dynamic' | 'force-static' | 'error'
export const revalidate = 60;       // ISR window in seconds; 0 = dynamic
export const dynamicParams = true;  // false: unknown [slug] values 404

Next.js 15 changes

• params, searchParams, cookies(), headers(), draftMode() are Promises: const { slug } = await params. Sync access still works but warns in dev. Codemod: npx @next/codemod@canary next-async-request-api .
• fetch is not cached by default; GET Route Handlers are dynamic by default.
• Router Cache staleTimes.dynamic defaults to 0; static pages stay 300 s.
• React 19: useActionState replaces useFormState. next/form, after() and connection() from next/server.
• Turbopack for next dev --turbopack; next.config.ts is supported.

The four caches

await fetch(url, { cache: 'force-cache' });            // cache indefinitely
await fetch(url, { next: { revalidate: 300 } });        // ISR for this fetch
await fetch(url, { next: { tags: ['posts'] } });        // tag for revalidateTag
export const getUser = cache(async (id: string) => db.user.find(id)); // React cache(): per-request dedupe

• Identical GET fetches in one render run once, even with no-store.
• router.refresh() refetches the current route but does not purge the server Data Cache.
• unstable_cache caches non-fetch work across requests; 'use cache' is experimental in 15 and became Cache Components in 16.

Server Actions

'use server';
export async function createPost(prev: State, formData: FormData) {
  const session = await auth();                 // authorise inside every action
  if (!session) return { error: 'Sign in' };
  const parsed = schema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) return { error: 'Invalid input' };
  await db.post.create({ data: parsed.data });
  revalidatePath('/posts');
  redirect('/posts');                           // outside try/catch: it throws NEXT_REDIRECT
}

• An action is a public POST endpoint identified by an action ID. Anyone can call it with curl.
• Forms work before hydration (progressive enhancement). useActionState returns state and isPending; useFormStatus reads pending state inside the form.
• Next checks Origin against the host (serverActions.allowedOrigins behind proxies), encrypts closure values, and drops unused actions. Default body limit 1 MB (serverActions.bodySizeLimit).
• Use a Route Handler instead for webhooks, other clients, custom status codes or cacheable GETs.

Middleware

// middleware.ts
import { NextResponse, type NextRequest } from 'next/server';
export function middleware(req: NextRequest) {
  if (!req.cookies.has('session')) return NextResponse.redirect(new URL('/login', req.url)); // 307
  return NextResponse.next();
}
export const config = { matcher: ['/dashboard/:path*'] }; // matches /dashboard too, not /dashboards

• Runs before routing and caches on every matched request, including prefetches. Edge runtime by default; runtime: 'nodejs' is stable from 15.5.
• Optimistic checks only. Authorise again next to the data: CVE-2025-29927 bypassed middleware with an x-middleware-subrequest header (fixed in 15.2.3).

Streaming, errors and hydration

• loading.tsx or Suspense streams the shell first. Once streaming starts the status code is sent, so call notFound() before any Suspense boundary.
• Production hides Server Component error messages; match the digest with server logs.
• Static page + useSearchParams() without Suspense fails the build.
• Hydration mismatch: React 19 error #418. Causes: Date.now(), Math.random(), locale dates, typeof window in render, localStorage, invalid nesting (div in p), browser extensions. Fix with useEffect, fixed time zones, or suppressHydrationWarning on one text node.

Environment, images, links

• Variables are server-only unless prefixed NEXT_PUBLIC_, which is inlined at build time: rebuild to change it, and never put secrets there.
• Load order: real env > .env.$NODE_ENV.local > .env.local (skipped in test) > .env.$NODE_ENV > .env.
• next/image: srcset, lazy by default, priority for the LCP image, width/height or fill + sizes, images.remotePatterns for remote hosts.
• next/link: real a element, viewport prefetch in production only, dynamic routes prefetch down to loading.tsx.
• Metadata: export const metadata or generateMetadata in Server Components; title.template, metadataBase, sitemap.ts, robots.ts, opengraph-image.tsx.

Deployment

• next start supports everything; output: 'standalone' for Docker images.
• Several instances: shared cacheHandler for ISR and the Data Cache, the same NEXT_SERVER_ACTIONS_ENCRYPTION_KEY and build ID everywhere.
• output: 'export': static files only. No Server Actions, middleware, ISR, cookies or default image optimisation.

Practise the questions on the Next.js chapter.