More in React & Next.js — page 10
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 Hydration: Bringing Server HTML to Life
Hydration turns static, server-rendered HTML into a fully interactive React app. It's the core of Server-Side Rendering (SSR), where the client "wakes up" the initial HTML by attaching event listeners.
Dockerizing Next.js with Multi-Stage Builds
Use a multi-stage Dockerfile to create lean, production-ready Next.js images. This separates build-time dependencies from the runtime environment, shrinking image size.
Password Hashing and Salting: Store Credentials Securely
Never store plaintext passwords. Instead, use a slow, one-way hash combined with a unique salt for each user, making it computationally expensive to reverse. This is essential for any app with user logins.
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.
Next.js Environment Variables: Server vs. Browser
Next.js environment variables separate server secrets from public browser config. Use them for API keys or database strings. The key footgun is exposing secrets by forgetting to prefix browser-accessible variables with `NEXT_PUBLIC_`.
Vercel: The Frontend Cloud Platform
Vercel turns your Git repo into a live, globally-scaled app. It's a CI/CD pipeline, server, and CDN in one, ideal for deploying Next.js apps with automatic previews for every PR.
JSON Web Tokens (JWTs): Stateless API Passports
A JWT is a digitally signed passport for your web session, letting a server verify your identity without a database lookup on every request. It's used for stateless API authentication. The footgun: its payload is readable, so never store secrets there.
Auth.js: Authenticate with Custom Credentials
The Auth.js Credentials provider lets you authenticate against your own system, like a user database. It's for when OAuth isn't an option and you need full control. The footgun: you are entirely responsible for the security of the login logic.
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`.
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.
Optimize Loading with next/script
The `next/script` component prevents third-party scripts from blocking your page's initial render. Use it for analytics, ads, or chat widgets to improve performance. The footgun is not choosing the laziest strategy possible for non-essential scripts.