App Router

Preview — 3 of 10 questions

What does this matcher pattern do?

javascript

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|ico|css|js)$).*)'],
};

AIt runs middleware on all routes, including static assets

BIt runs middleware on every route except Next.js internals (_next/static, _next/image), the favicon, and common static file extensions — the standard "protect app routes, skip assets" pattern

CIt runs middleware only on API routes

DThe (?!...) negative-lookahead syntax is not valid in Next.js matchers

When would you choose the Edge runtime over the Node.js runtime for a route?

javascript

export const runtime = 'edge';    // vs 'nodejs' (default)

AChoose Edge for lightweight, latency-sensitive work (auth checks, redirects, geolocation) — it runs close to users with near-zero cold starts but only Web-standard APIs. Choose Node.js (the default) when you need full Node APIs or libraries that depend on them, such as most database drivers and ORMs, accepting a slightly higher cold start

BAlways use Edge — it is strictly faster

CThe Edge runtime supports every npm package

DThe Edge runtime is deprecated in Next.js 14

How do you create a custom 404 and a global error page in the App Router?

ACreate pages/404.tsx and pages/_error.tsx

BConfigure them in next.config.ts

CCreate app/not-found.tsx (rendered for unmatched routes and by notFound()) and app/global-error.tsx (a Client Component that catches errors thrown in the root layout and replaces it, so it must render its own <html> and <body>)

DCreate app/404/page.tsx and app/500/page.tsx

Answer all 10 questions (7 more), see explanations for every answer, and track your score.