前端开发

前端生产环境日志治理：Next.js 中禁用 console.log 的最佳实践

本文系统梳理了 Next.js 项目在生产环境中禁用 console.* 日志的三种方案——compiler.removeConsole、TerserPlugin pure_funcs 和 Worker 手动处理，以及三端（frontend-blog / admin-blog / admin-next）的落地实践。

Next.js 返回导航完全指南：滚动位置恢复、URL 参数保持与 iOS 安全区域

本文深入剖析了 Next.js App Router 下返回导航滚动恢复失效的三大根因——sessionStorage 条件误判、URL 参数丢失、React Strict Mode 双重挂载，以及连带修复的 iOS Safari 安全区域抖动和 CategoryFilter 选项卡抖动问题。

Quill 富文本视频嵌入到 HLS 自适应播放：前端替换完整实现

本文详细讲解在博客系统中，如何将 Quill 富文本编辑器嵌入的 MP4 视频标签，在文章详情页自动替换为 HLS m3u8 自适应流播放。涵盖后端转换管道、meta.contentVideo 多视频存储、前端 Markdown/HTML 双路径替换、IndexedDB 缓存层修复，以及实践中的 6 个关键 Bug 和修复方案。

BlurhashImage — SSR 安全的 BlurHash 占位符组件与"像文字一样平滑"的渲染策略

Zustand + Cookie Storage — SSR 认证持久化策略

**源码**: [`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 平台适配器：三端统一数据请求与自动降级策略

React 跨组件 HLS 视频协调：点击播放 + 单视频互斥

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.

管理后台大文件上传优化：从 Multer OOM 到预签名 URL 直传的踩坑实录

Next.js 零骨架屏优化实战：ISR + 四层架构 + 平台感知缓存

Next.js 三模式统一 Fetcher 适配层：CSR/SSG/SSR 一键切换的数据请求架构

为 Next.js App Router 设计的通用数据请求层，一条代码在浏览器、构建时、服务端三种环境中自动适配，写操作在服务端静默跳过，缓存策略按环境智能选择