Next.JS Prop className did not match in V4

[bluewave41]

I don't believe this matches issues like #28272 or #27512 as they seem to deal with V5 while I am not using the beta.

Using the given Next.JS example provided at https://github.com/mui-org/material-ui/tree/master/examples/nextjs and adding in a very simple page causes a prop className did not match error.

The page in question is very simple.

import Box from "@material-ui/core/Box";

const Starter = (props) => {
    return (
        <div>
            <Box display='flex'>
            </Box>
        </div>
    )
}

export default Starter;

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce 🕹

1. Clone example project
2. npm i @material-ui/core
3. Add page referenced above
4. Navigate to /starter
5. Observe error

Codesandbox: https://codesandbox.io/s/blissful-pine-8w7tv?file=/pages/starter.js

(I added @material-ui/core as a dependency as it wasn't already and is required for this to happen)

Context 🔦

Your Environment 🌎

`npx @mui/envinfo`

System:
OS: Windows 10 10.0.19043
Binaries:
Node: 13.8.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.13.6 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 93.0.4577.82
Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.52)
npmPackages:
@types/react: 17.0.20
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2

I use Google Chrome/

[eps1lon]

The example in https://github.com/mui-org/material-ui/tree/master/examples/nextjs is for v5. If you want to use v4, use https://github.com/mui-org/material-ui/tree/v4.x/examples/nextjs instead.

[bluewave41]

Still having the same issues regardless of which example I use.

1. npx create-next-app
2. npm i @material-ui/core
3. Add _document and _app from example project
4. Add a box component
5. Error

I haven't touched any other files. Simply creating a box doesn't work.