More in React & Next.js — page 11
next/font: Zero Layout Shift Fonts
next/font bundles fonts with your app at build time, serving them from your own domain to eliminate layout shift and extra network requests. It's the standard for any Next.js app. The footgun is using `<link>` tags, which negates all benefits.
Next.js `next/image`: Stop Shipping Giant Images
The `next/image` component is an automated image pipeline, not just an `<img>` tag. It resizes, optimizes, and serves modern formats like WebP, improving load times. The footgun is forgetting to provide `width` and `height`, causing layout shifts.
Next.js Draft Mode: Previewing Static Content
Next.js Draft Mode bypasses static pages to preview unpublished content from a headless CMS. It's for content editors who need to see changes live before publishing. The footgun is security: a leaked secret token exposes all draft content.
Handling CORS in Next.js API Routes
CORS isn't a global config; it's a per-route response header. To allow cross-origin requests to your API, you must manually set headers like `Access-Control-Allow-Origin` in your Route Handlers, including handling preflight OPTIONS requests.
Next.js Runtimes: Edge vs. Node.js
Choose your server environment in Next.js: a fast, limited Edge function or a powerful Node.js backend. Use the Edge for low-latency tasks like auth checks; stick with Node.js for its full API set and heavier computation.
Next.js: Dynamic API Segments for Flexible Endpoints
Think of dynamic API segments as URL templates. A single file like `app/api/users/[id]/route.ts` can handle requests for any user ID, from `/api/users/1` to `/api/users/99`. The footgun is forgetting to parse the ID, which is always a string.
NextResponse.json(): The Standard for API Responses in Next.js
NextResponse.json() is the standard way to send JSON from Next.js Route Handlers, like Express's res.json(). Use it in app/api routes to return data; it automatically sets the correct headers.
Next.js Route Handlers: One File, Multiple Methods
Think of a Next.js Route Handler file as a dedicated API endpoint. You handle different HTTP requests by exporting functions named `GET`, `POST`, `DELETE`, etc. Use them to build API routes for form submissions or to fetch data for client-side components.
Partial Prerendering (PPR): Static Speed for Dynamic Pages
Partial Prerendering serves a static page shell instantly, then streams in dynamic parts. It's like getting a pre-built house frame immediately, with custom rooms delivered and slotted in as they're finished.
Next.js Route Segment Config
Think of Next.js Route Segment Config as per-route dials for runtime, caching, and timeouts. Use it to run a specific API route on the Edge for speed or increase the timeout for a data-heavy page. The footgun: settings don't cascade to child routes.
Dynamic Functions in Next.js
Using functions like `cookies()` or `headers()` forces a Next.js page to be rendered dynamically for each request. This is key for personalized content or pages depending on search params.
generateStaticParams: Pre-building Dynamic Pages in Next.js
Think of `generateStaticParams` as a build-time guest list for your dynamic routes. It tells Next.js all possible parameters (like post slugs) upfront to pre-render static pages. The footgun: it only provides params, not the page data itself.
Next.js Extends `fetch` for Server-Side Caching
Next.js extends the standard `fetch` API to control server-side caching and revalidation. In Server Components, pass options like `next: { revalidate: 3600 }` or `tags` to manage how data is cached. This extension is server-only and ignored in browsers.
'use client': The Boundary Between Server and Client
'use client' marks where server-only rendering ends and browser interactivity begins. Use it for components with state (`useState`), effects (`useEffect`), or event listeners (`onClick`), enabling them to run in the browser.
Next.js Intercepting Routes: Modals on Rails
Intercepting routes let you show one route's content inside another's layout, like a photo modal over a gallery feed. It's ideal for shareable modal URLs. The footgun: a page refresh or direct navigation bypasses the interception, rendering the full page.
Next.js Parallel Routes: Multiple Pages in One View
Parallel Routes render multiple independent pages within a single layout, like a split-screen dashboard. This is ideal for complex UIs where different sections need to load and be managed separately.
Next.js Caching: When and How to Revalidate Data
Next.js aggressively caches data by default. Revalidation is how you tell it the data is stale, either after a set time or on-demand after a mutation. The footgun is forgetting `fetch` is cached; use `revalidatePath` or `revalidateTag` to bust the cache.
Dynamic Rendering: On-Demand Pages in Next.js
Dynamic Rendering in Next.js generates a page's HTML on the server for each user request, ensuring fresh content. It's ideal for personalized dashboards or pages with rapidly changing data.
Next.js Metadata API: Control Your Site's Preview
The Next.js Metadata API is a structured way to control your page's `<head>` for SEO and social sharing. It lets you define titles, descriptions, and Open Graph images for crawlers and link previews.
error.js: Graceful Error Boundaries in Next.js
The `error.js` file acts as a UI safety net, catching runtime errors in a Next.js route segment to prevent a full app crash. Use it to display a custom error message and a "try again" button.