Frontend Development

Frontend Production Environment Log Governance: Best Practices for Disabling console.log in Next.js

This article systematically reviews three approaches to disabling console.* logs in Next.js projects in production—compiler.removeConsole, TerserPlugin pure_funcs, and manual Worker handling—along with the practical implementation across three endpoints (frontend-blog / admin-blog / admin-next).

Next.js Back Navigation Complete Guide: Scroll Position Restoration, URL Parameter Preservation, and iOS Safe Area

This article deeply analyzes the three root causes of scroll restoration failure during back navigation in the Next.js App Router — `sessionStorage` condition misjudgment, URL parameter loss, and React Strict Mode double mounting — along with the associated fixes for iOS Safari safe area jitter and CategoryFilter tab jitter.

Quill Rich Text Video Embedding to HLS Adaptive Streaming: Complete Frontend Replacement Implementation

This article details how to automatically replace MP4 video tags embedded in the Quill rich text editor with HLS m3u8 adaptive streaming in a blog system's article detail page. It covers the backend conversion pipeline, multi-video storage with meta.contentVideo, frontend Markdown/HTML dual-path replacement, IndexedDB cache layer fixes, and 6 key bugs encountered in practice along with their solutions.

BlurhashImage — SSR-Safe BlurHash Placeholder Component with "Smooth as Text" Rendering Strategy

Zustand + Cookie Storage — SSR Authentication Persistence Strategy

**Source Code**: [`auth.store.ts`](apps/frontend-blog/src/lib/stores/auth.store.ts) (357L) · [`cookie-storage.ts`](apps/frontend-blog/src/lib/stores/cookie-storage.ts) (171L) · [`cookie-manager.ts`](apps/frontend-blog/src/lib/utils/cookie-manager.ts)

React Query Platform Adapter: Unified Data Requests and Automatic Degradation Strategy for Three Platforms

React Cross-Component HLS Video Coordination: Click-to-Play + Single Video Mutual Exclusion

Ein realer Fall von Frontend-Performance-Optimierung. Durch eine `CustomEvent`-Event-Bus-Architektur kombiniert mit Lazy-Loading wird das Problem der Bandbreitenkonkurrenz durch zahlreiche Videostreams beim Laden der Startseite vollständig gelöst.

Admin Panel Large File Upload Optimization: A Pitfall Chronicle from Multer OOM to Presigned URL Direct Upload

Next.js Zero Skeleton Screen Optimization in Practice: ISR + Four-Layer Architecture + Platform-Aware Caching

Next.js Three-Mode Unified Fetcher Adapter Layer: A Data Request Architecture for One-Click Switching Between CSR/SSG/SSR

A universal data request layer designed for the Next.js App Router, where a single piece of code automatically adapts across browser, build-time, and server environments. Write operations are silently skipped on the server, and caching strategies are intelligently selected based on the environment.