Intermediate everything in Frontend Dev, page 24
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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: 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.
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.
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.
Server Components: Fetch Data Directly
Server Components let you fetch data directly using async/await, simplifying code by removing client-side useEffect hooks. Use this for initial page loads in Next.js to improve SEO and performance. The footgun: don't use client-side hooks or browser APIs.
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