Deployment & Performance

Concept: A lightweight runtime based on Web Standards (V8) that starts instantly and runs closer to the user (CDN edge locations). It does not support all Node.js APIs.

Use Cases: Middleware (redirects, rewrites, auth checks), simple API routes, or personalized content that needs low latency.

Trade-off: You cannot use libraries that rely on Node.js specific APIs (like fs or some database drivers) unless they are "Edge compatible".

• Size Optimization: Automatically serves correctly sized images for each device (WebP/AVIF).
• Visual Stability: Prevents Layout Shift (CLS) by requiring width/height or aspect ratio.
• Lazy Loading: Images are only loaded when they enter the viewport (default behavior).

Middleware runs before a request completes. It allows you to modify the response by rewriting, redirecting, modifying request headers, or responding directly.

Common Use Case: Authentication. Checking if a user has a valid session cookie before allowing access to protected routes.

export function middleware(request) {
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    // Check auth...
  }
}

Using next/font (Google or Local):

• Self-hosting: Fonts are downloaded at build time and hosted with your other static assets. No external requests to Google.
• Zero Layout Shift: Next.js uses a fallback font with size-adjust metrics to match the custom font, swapping it seamlessly once loaded.