Content jump and css issue in Next JS

What is the recommended way to integrate mui v5 in next js

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

Current Behavior 😯

Content jumps due to css not getting injected in server side when used with withStyles

Expected Behavior 🤔

CSS should get injected and the content should not jump.

Steps to Reproduce 🕹

Steps:

1. Take the example next js app and write a component and then refresh the page.

Context 🔦

Migrating from v4 to v5 for an application in next js

Your Environment 🌎

`npx @mui/envinfo`

    System:
    OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Firefox: 92.0

I followed code written in mui docs code given here https://github.com/mui-org/material-ui/blob/master/docs/pages/_document.js

It injects material sheets which is not given in reference project after adding that the content jump stopped but during regular deployments the content jumps sometimes

[sjj1991]

I think this issue might be related to SSR. On initial build yarn build && yarn start the styles seems to be working fine (even on hard refresh). However, after 60 seconds (set in revalidate) the styles from the SSR pages goes missing, causing the content jump.

[mnajdova]

It doesn’t look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve