MUI SSR with Next.js 1. Next.js App Router Setup (v13+) The App Router requires a client-side ThemeRegistry component that flushes Emotion's server-generated styles into the document head via . ThemeRegistry client component ThemeRegistry wrapper app/layout.tsx integration Required dependencies --- 2. Next.js Pages Router Setup The Pages Router uses to extract critical CSS at render time and inject it into the initial HTML response. createEmotionCache utility app.tsx with CacheProvider document.tsx with extractCriticalToChunks Additional dependency for Pages Router --- 3. Server Components Co…