Easy everything in Frontend Dev, page 13
The DOM: Your HTML as a Live Object Tree
The DOM is the browser's live model of a webpage, represented as a tree of objects. JavaScript uses it to find elements, change content, and react to clicks. The footgun: DOM changes are in-memory; they don't edit the original HTML file on the server.
The `document` Object: Your Page's API
The document object is the root of the DOM tree, representing the entire webpage in your script. Use it to find elements (getElementById), create new ones (createElement), or read page info. The main footgun: accessing an element before it's been parsed.
The `window` Object: Your Browser's Global Scope
Think of the window object as the global stage for your JavaScript. It represents the browser tab and holds all global variables and APIs like fetch and setTimeout. You use it constantly, often implicitly.
TypeScript's Basic Types: The Building Blocks
TypeScript builds on JavaScript's primitives (string, number, boolean) by letting you explicitly declare a variable's type. This is the foundation for catching errors early. The main footgun is confusing tuples [string, number] with flexible arrays.
TypeScript Type Annotations: Defining Your Data's Shape
Type annotations are contracts for your data, telling TypeScript what to expect from variables and functions. You'll use them for primitives like string or number, and for arrays like string[].
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.
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.
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.
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.
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.
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.
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.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 Route Groups: Invisible Folders for Routes
Route Groups are invisible folders for your Next.js routes, letting you organize files without changing the URL. Use them to apply a specific layout to a set of pages, like a marketing section vs. a user dashboard.
next/link: Fast, Client-Side Navigation
next/link is an enhanced <a> tag for fast, client-side page transitions, preserving the SPA feel. It automatically prefetches linked pages for instant loading.
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