Nextjs
37 bites tagged Nextjs — interview questions with model answers, and 60-second explainers.
Next.js Instrumentation: Code That Runs on Server Startup
Next.js's `instrumentation.ts` file runs code once when your server process starts, before any requests. It's ideal for setting up global logging, monitoring like OpenTelemetry, or database connections.
Configuring Security Headers in Next.js
Security headers are rules your server sends the browser to prevent attacks like XSS and clickjacking. In Next.js, you configure these globally in `next.config.js`.
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.
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 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.
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 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.
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.
next.config.js: Your Next.js App's Control Panel
Think of `next.config.js` as your app's control panel, letting you change Next.js's default behavior. Use it for redirects, environment variables, or image optimization. The biggest footgun: you must restart your dev server after making any changes.
Next.js: Pages Router vs. App Router
The App Router treats UI as a tree of components, while the older Pages Router treats it as a collection of separate pages. Use App Router for new projects to leverage layouts and Server Components.
Next.js SSG: Pre-render Pages for Maximum Speed
Next.js's Static Site Generation (SSG) pre-renders pages into static HTML at build time, serving them instantly from a CDN. It's ideal for content that rarely changes, like blog posts, ensuring top performance. The main pitfall is serving stale data.
next/dynamic: Defer Loading Heavy Components
next/dynamic splits a component into its own file, loading it only when needed to shrink your initial bundle. Use it for heavy components below the fold or browser-only libraries. The footgun: forgetting a loading state causes layout shifts.
Get Nextjs bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.