Intermediate concepts in React & Next.js, page 3
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.
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.
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.
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.
Next.js Middleware: Your App's Edge Bouncer
Think of Next.js Middleware as a bouncer at your app's door. It runs code on the edge before a request is processed, letting you redirect, rewrite, or block it. The main footgun is forgetting it runs in a limited Edge Runtime, not a full Node.js.
Next.js i18n Routing: URLs for a Global Audience
Next.js i18n routing maps locales to URLs, like /en/about or /es/acerca-de. It's not just text translation; it's building a site structure for each language. This improves SEO and user experience.
Next.js Router Cache: Instant Client-Side Navigation
The Next.js Router Cache is a client-side, in-memory cache that makes navigation feel instant by storing the rendered UI of visited routes. It's why navigating with <Link> is fast. The footgun: it caches UI, not data, so stale content can appear.
MDX in Next.js: Markdown with Superpowers
MDX lets you write in Markdown and embed interactive React components directly inside your content. Use it for blogs or docs that need more than static text, like interactive charts or code demos.
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.
Session Authentication: JWT vs. Database
Session auth gives users an ID after login. A JWT is a self-contained ID card with their data; a database session is a library card pointing to their record. The key trade-off: JWTs are fast but can't be easily revoked, while database sessions are revocable.
OAuth 2.0: Delegated Access, Not Shared Passwords
OAuth 2.0 lets users grant limited access to their data without sharing passwords. It's used when a third-party app needs to read your Google Calendar. The common footgun is mistaking it for authentication (logging in); it's for authorization.
Auth.js: Full-Stack Authentication for Next.js
Auth.js simplifies full-stack authentication in Next.js, handling social logins and session management. It lets you add providers like GitHub with minimal code, abstracting away OAuth flows.
Automating Next.js Builds and Deployments with CI/CD
CI/CD for Next.js is an automated assembly line for your app. It builds, tests, and deploys your code on every push, catching errors early. The biggest footgun is not caching build artifacts, resulting in slow, expensive pipelines.
HttpOnly Cookies: Keep Secrets from JavaScript
The HttpOnly flag makes cookies inaccessible to client-side JavaScript, preventing theft via XSS attacks. Use it for session tokens the server needs but the UI doesn't.
React's SyntheticEvent: One Wrapper for All Browsers
React's SyntheticEvent is a browser-agnostic wrapper around native events, ensuring your onClick handlers behave identically everywhere. The main footgun: event objects are pooled for performance, so you can't access their properties in an async callback.
React Error Boundaries: Containing UI Crashes
An Error Boundary is like a try...catch block for React components, preventing a single UI crash from breaking your whole app. Use it to wrap components that might fail, showing a fallback UI instead of a white screen.
React's Concurrent Rendering: Interruptible UI Updates
Concurrent Rendering lets React pause and resume rendering, so a large update won't freeze the UI. It's like a chef pausing a big task to handle a quick order, ensuring the app stays responsive. This is key for features like Suspense.
React Render Bailouts: Skipping Unnecessary Work
React's Performance Hooks let you 'bail out' of unnecessary re-renders by caching results. React reuses the cached output unless specific dependencies change, saving computation on expensive components.
The <Route> Component: Mapping URLs to UI
The <Route> component is like a switch statement for your UI, telling your app 'when the URL is X, render component Y'. It's used to define pages like /dashboard or /users/:id. The footgun is forgetting it must live inside a <Routes> component.
useParams: Accessing Dynamic URL Segments
The useParams hook lets client components read dynamic URL segments. On a route like /posts/[slug], it returns an object like { slug: 'my-post' }. Remember, it's for client components only and won't see query strings.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles