All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8668 bites
Page 267
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.
Next.js Loading UI: Instant Shells, Streamed Content
Next.js's loading.js shows an instant UI shell while streaming in server-rendered content. Use it for data-heavy pages to improve perceived performance. The footgun: a loading UI only wraps its own route segment and children, not parent layouts.
Route Handlers: Your Next.js App's API Endpoints
Route Handlers are lightweight API endpoints built into your Next.js app. Use them to serve JSON or handle form posts. The footgun is confusing them with Server Components; Route Handlers return data, not rendered UI.