Authentication in Next.js has always been a multi-layered concern: you need to verify identity, persist session state, and enforce authorization at every entry point. What changed with the App Router and Server Actions is the surface area. Server Components render on the server without a client round-trip, Server Actions execute as independent mutation endpoints, and…
The App Router’s routing model goes beyond nested segments and layouts. Two conventions extend it into composition: parallel routes, which render multiple pages in the same layout through named slots, and intercepting routes, which display a route from another part of the tree within the current layout. The two are most valuable when combined. Parallel…
The React Compiler is a build-time tool that automatically memoizes React components and hooks. It analyzes the data flow and mutability of the code and inserts the equivalent of useMemo, useCallback, and React.memo where it can prove that the optimization does not change behavior . Next.js 16 promoted the integration from experimental to stable, and…
Turbopack is Next.js’s Rust-based bundler, built to replace webpack with an incremental computation engine. It reached stable status for production builds in Next.js 16 and became the default bundler for all new projects, delivering 2–5× faster production builds and up to 10× faster Fast Refresh . The filesystem cache, which persists compilation artifacts across runs,…
The navigation() function is a server-side API that controls which parts of a route are included in a prefetch. It is part of the Instant Navigations feature introduced in Next.js 16.3, and it exists to solve a specific cost problem: a prefetch that renders an entire page, including its most expensive data, does work for…
React applications have two distinct categories of lint rules, and they come from two different plugins. eslint-plugin-react provides rules about JSX syntax and component structure: missing key props, unescaped entities, unknown DOM properties, and prop type validation . eslint-plugin-react-hooks provides rules about the Rules of React: the ordering of hooks, the dependency arrays, and the…
TypeScript is not JavaScript, and ESLint’s core parser cannot understand its syntax. The typescript-eslint project provides the parser that translates TypeScript’s syntax into an ESTree-compatible AST, and the rules that use TypeScript’s type information to catch bugs that a syntax-only linter cannot detect. The project is a monorepo that includes the parser, the plugin, and…
A plugin’s rules are referenced with a namespace prefix. The prefix is the property name that the plugin is assigned to in the plugins object, and the rule is referenced as namespace/rule-name. The convention exists because a plugin’s rule names are not guaranteed to be unique: two plugins can both define a rule called no-unused-vars,…
A plugin is an npm package that exports an object conforming to ESLint’s plugin interface. The object contains rules, configs, and processors. Importing a plugin into the flat config is the mechanism that makes its rules available to the rules object, its configs available to extends, and its processors available to the processor key. The…
A shareable config is an npm package that exports an ESLint configuration object or array. It packages a set of rules, plugins, parsers, and language options into a single dependency that a project can import and apply. The ESLint ecosystem has produced dozens of these packages—Airbnb’s style guide, Standard’s minimalist rules, Google’s readability-focused set, and…