Repository: material-ui
Issue: [examples] Next.js example renders duplicate CSS (after downgrading to next v12.1.5)
Labels: external dependency,nextjs

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

Pull down the `nextjs-with-typescript` example:

```console
$ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs-with-typescript
$ cd nextjs-with-typescript
```

Downgrade next.js to 12.1.5 (from the bad 12.1.6 release) in the `package.json`:

```
───────┬────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: package.json
───────┼────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ {
   2   │   "name": "nextjs-with-typescript",
   3   │   "version": "5.0.0",
   4   │   "private": true,
   5   │   "scripts": {
   6   │     "dev": "next dev",
   7   │     "build": "next build",
   8   │     "start": "next start",
   9   │     "lint": "next lint",
  10   │     "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
  11   │   },
  12   │   "dependencies": {
  13   │     "@emotion/cache": "latest",
  14   │     "@emotion/react": "latest",
  15   │     "@emotion/server": "latest",
  16   │     "@emotion/styled": "latest",
  17   │     "@mui/icons-material": "latest",
  18   │     "@mui/material": "latest",
  19 > │     "next": "12.1.5",
  20   │     "react": "latest",
  21   │     "react-dom": "latest"
  22   │   },
  23   │   "devDependencies": {
  24   │     "@types/node": "latest",
  25   │     "@types/react": "latest",
  26   │     "eslint": "latest",
  27   │     "eslint-config-next": "latest",
  28   │     "typescript": "latest"
  29   │   }
  30   │ }
───────┴────────────────────────────────────────────────────────────────────────────────────────────────
```

Install the dependencies, and run the development server:

```console
$ npm i
$ npm run dev
```

Visit `localhost:3000`, right-click and `View page source`, `Ctrl+F` for `style`, watch the server send down duplicate CSS style tags in the `<head>` and `<body>` (😳)

![image](https://user-images.githubusercontent.com/87198856/173247614-32ba2c99-8e33-4f33-b636-f282e2644ac1.png)


### Expected behavior 🤔

A clean, head-only style output

### Steps to reproduce 🕹

Steps are detailed in `Current behavior`


### Context 🔦

_No response_

### Your environment 🌎

<details>
  <summary>`npx @mui/envinfo`</summary>

```console
$ npx @mui/envinfo                                                   
Need to install the following packages:
  @mui/envinfo
Ok to proceed? (y) y

  System:
    OS: macOS 12.4
  Binaries:
    Node: 18.2.0 - /opt/homebrew/bin/node
    Yarn: Not Found
    npm: 8.9.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.5
  npmPackages:
    @emotion/react: 11.9.0 => 11.9.0 
    @emotion/styled: 11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.84 
    @mui/icons-material: 5.8.3 => 5.8.3 
    @mui/material: 5.8.3 => 5.8.3 
    @mui/private-theming:  5.8.0 
    @mui/styled-engine:  5.8.0 
    @mui/system:  5.8.3 
    @mui/types:  7.1.3 
    @mui/utils:  5.8.0 
    @types/react: 18.0.12 => 18.0.12 
    react: 18.1.0 => 18.1.0 
    react-dom: 18.1.0 => 18.1.0 
    typescript: 4.7.3 => 4.7.3
```
</details>

Tested in Chromium `101.0.4951.64 (Official Build, ungoogled-chromium) (arm64)`, Firefox Developer Edition `102.0b2 (64-bit)`, Safari `15.5` on an M1 Pro MacBook