Frontend-Entwicklung

Frontend Production-Log-Governance: Best Practices zum Deaktivieren von console.log in Next.js

Dieser Artikel systematisiert drei Ansätze zum Deaktivieren von console.*-Logs in Next.js-Projekten in der Produktion – compiler.removeConsole, TerserPlugin pure_funcs und manuelle Worker-Behandlung – sowie deren praktische Umsetzung in drei Projekten (frontend-blog / admin-blog / admin-next).

Next.js Rückwärtsnavigation Vollständiger Leitfaden: Scrollpositionswiederherstellung, URL-Parametererhaltung und iOS-Sicherheitsbereich

Dieser Artikel analysiert eingehend die drei Hauptursachen für das Versagen der Scrollwiederherstellung bei der Rückwärtsnavigation unter Next.js App Router – Fehleinschätzung der sessionStorage-Bedingung, Verlust von URL-Parametern, doppeltes Mounten im React Strict Mode – sowie die damit verbundenen Behebungen des iOS Safari Sicherheitsbereichs-Flackerns und des CategoryFilter-Tab-Flackerns.

Quill Rich-Text-Video-Einbettung in HLS-Adaptives-Streaming: Vollständige Frontend-Ersetzung

Dieser Artikel beschreibt detailliert, wie in einem Blog-System die vom Quill Rich-Text-Editor eingebetteten MP4-Video-Tags auf der Artikel-Detailseite automatisch durch HLS-m3u8-Adaptives-Streaming ersetzt werden. Abgedeckt werden die Backend-Transcoding-Pipeline, die `meta.contentVideo`-Mehrfachvideo-Speicherung, die Frontend-Markdown/HTML-Doppelpfad-Ersetzung, die IndexedDB-Cache-Layer-Reparatur sowie 6 kritische Bugs und deren Lösungen aus der Praxis.

BlurhashImage — SSR-sicheres BlurHash-Platzhalter-Komponente mit einer Rendering-Strategie, die "so glatt wie Text" ist

Zustand + Cookie Storage — SSR-Authentifizierungspersistenzstrategie

**Quellcode**: [`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 Plattform-Adapter: Einheitliche Datenanfragen und automatische Degradierungsstrategie für drei Endgeräte

React-übergreifende HLS-Videokoordination: Klick zum Abspielen + Einzelvideo-Mutex

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.

Optimierung großer Datei-Uploads im Admin-Backend: Vom Multer-OOM zum Pre-Signed-URL-Direkt-Upload – eine Fallstrick-Chronik

Next.js Zero-Skeleton-Screen Optimierung in der Praxis: ISR + Vier-Schichten-Architektur + Plattformbewusstes Caching

Next.js Drei-Modus Einheitliche Fetcher-Adapter-Schicht: Datenabfrage-Architektur mit einem Klick zwischen CSR/SSG/SSR

Eine universelle Datenabfrageschicht für den Next.js App Router, die mit einer einzigen Codebasis automatisch in Browser-, Build- und Server-Umgebungen adaptiert. Schreiboperationen werden auf dem Server stillschweigend übersprungen, und die Cache-Strategie wird intelligent an die Umgebung angepasst.