Next.js、React、TypeScript、前端工程化
This collection features articles and community discussions in the Web 开发 space, focusing on real-world engineering scenarios, tool selection, practical paths, and risk boundaries.
The page is continuously updated and serves as a learning roadmap, technology selection reference, and technical review entry point.
How you split components, manage state, and reuse logic is determined by design patterns. This article explains common React patterns: container/presentational separation, custom Hooks, Render Props, Compound Components, and the Provider pattern, along with the problems each one solves.
When an AI answer disconnects halfway through, a simple retry can duplicate text or tool side effects and lose context. This article defines event logs, recovery cursors, failure classification, and safe retry boundaries.
Rendering an AI response token by token does not make the streaming pipeline reliable. This article covers propagating cancellation signals, real backpressure, resource cleanup, and verifiable connection lifecycles from the browser to the upstream model.
JavaScript is single-threaded, so heavy computation can freeze the UI. Web Workers run JavaScript on background threads without blocking the main thread. This article covers postMessage, CPU-intensive use cases, Dedicated, Shared, and Service Workers, transfer strategies, Comlink, and WASM integration.
Once files are uploaded to an AI application, they flow through object storage, parsers, and model context, making them far riskier than ordinary attachments. This article presents isolated uploads, server-side validation, malicious-content scanning, and permission binding.
The App Router is central to Next.js, yet many developers underuse nested layouts, parallel routes, intercepting routes, and dynamic segments. This article covers its file conventions, advanced routing patterns, Server/Client Component data flow, and the key differences when migrating from the Pages Router.
Semantic HTML is not enough: custom React components such as modals, dropdowns, tabs, and toasts require explicit a11y handling for focus management, keyboard navigation, ARIA, and screen-reader announcements.
Lighthouse only runs during development, but who watches real users in production? RUM (Real User Monitoring) collects real-user LCP, INP, CLS, and JavaScript errors. This article covers collection with the web-vitals library, reporting, dashboards, and alerts, turning "fast in the lab" into "fast for users."
Flexbox is one-dimensional; Grid is two-dimensional—real page layout should use Grid. This article explains Grid's core concepts (rows/columns/areas/tracks), the fr unit and minmax, grid-template-areas semantic layout, responsive Grid (auto-fit/auto-fill), and Grid vs Flexbox tradeoffs, taking you from 'able to use Grid' to 'mastering Grid'.
One Preview environment per PR is convenient, but it can easily reuse data, credentials, and stale deployments across environments. This article defines ephemeral environment identities, seed snapshots, monotonic leases, and destruction receipts so creation, retries, closure, and rollback are all verifiable.
React 18+ concurrent rendering is not multithreading; it is interruptible rendering. Learn Suspense for declarative loading states, useTransition for low-priority updates that do not block input, useDeferredValue for deferring expensive work, and how they keep React apps responsive.
The implicit flow is unsafe for SPAs and mobile apps; PKCE is now standard. This article explains PKCE (`code_verifier`/`code_challenge`), why it replaces the implicit flow, access and refresh token lifecycles, token rotation and revocation, and a production-grade OAuth client implementation.