🌐 Frontend Dev

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.

easy1 min read

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.

intermediate1 min read

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.