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 useServerInsertedHTML.

ThemeRegistry client component

// src/components/ThemeRegistry/EmotionCache.tsx
'use client';

import * as React from 'react';
import createCache from '@emotion/cache';
import { useServerInsertedHTML } from 'next/navigation';
import { CacheProvider } from '@emotion/react';

export default function NextAppDirEmotionCacheProvider(