Mutqin AI is a high-traffic AI content generation platform that underwent a complete architectural overhaul. Migrated from a client-rendered Vite SPA to a modular Next.js application, the platform was rebuilt using Atomic Design principles, server-side rendering strategies, and optimized rich-text editing to serve multi-language users across the MENA region.
Next.js & Atomic Design Refactor
Architected a modular component system using Atomic Design principles, migrating the entire platform from Vite to Next.js.
SSR & SSG Edge-Caching
Pivoted core rendering strategies to SSR and SSG to maximize CDN edge-caching and achieve ultra-fast time-to-first-byte.
Optimized Quill Rich-Text Engine
Replaced Tiptap with a custom Quill editor configuration, eliminating client-side hydration delays and improving editing performance.
Dual-Token JWT Security Strategy
Engineered a dual-token auth flow using short-lived tokens in session storage and long-lived secure cookies managed via Redux Toolkit.
- Next.js App Router migration leveraging SSR and SSG for optimal SEO, fast initial loads, and edge-caching via CDNs.
- Atomic Design methodology structuring UI elements into modular Atoms, Molecules, Organisms, Templates, and Pages.
- Lightweight custom Quill.js rich-text engine replacing Tiptap to minimize client JavaScript bundle weight and hydration overhead.
- Native Server Component integration for next-intl, executing internationalization on the server to reduce browser processing.
- Dual-token JWT security flow managed via Redux Toolkit (RTK) balancing state responsiveness with strict cookie TTL settings.
Migrating Mutqin AI from a client-rendered SPA to Next.js transformed page performance. By shifting key rendering paths to Server-Side Rendering (SSR) and Static Site Generation (SSG), pages were cached directly at CDN edges. Combining this with Atomic Design ensured component reusability across multi-language views.
Client-side hydration delays were resolved by replacing the Tiptap editor with a tailored Quill implementation, sharply cutting down initial JavaScript execution time. Additionally, configuring next-intl to run natively within Server Components eliminated client-side translation parsing.
To guarantee secure multi-session access, a dual-token auth architecture was deployed. Short-lived access tokens reside in session storage managed via Redux Toolkit (RTK), while long-lived refresh tokens are secured in HTTP-only cookies with strict TTL policies.
- Next.jsCore Framework
- SSR/SSGRendering
- QuillRich Text Engine
- JWTAuth Security
- Moving internationalization to Server Components eliminates client-side translation bundle overhead entirely.
- Heavy rich-text editors can severely bottleneck React hydration; lightweight customized solutions provide far better runtime performance.