diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 329b68dccacd6e..044877d094ce95 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -48,6 +48,13 @@ Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elemen } ``` +:::info +The `AppRouterCacheProvider` component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is streaming chunks of the .html page to the client. + +While it's not required to use the `AppRouterCacheProvider` component, it's recommended to use it to ensure that the styles are appended to the `` and not rendering in the ``. +See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better. +::: + #### Custom cache (optional) Use the `options` prop to override the default [cache options](https://emotion.sh/docs/@emotion/cache#options)—for example, the code snippet below shows how to change the CSS key to `css` (the default is `mui`): @@ -218,6 +225,13 @@ Then, inside `pages/_app.tsx`, import the `AppCacheProvider` component and rende } ``` +:::info +The `AppCacheProvider` component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is rendering the .html page to the client. + +While it's not required to use the `AppCacheProvider` component, it's recommended to use it to ensure that the styles are appended to the `` and not rendering in the ``. +See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better. +::: + #### Custom cache (optional) To use a custom [Emotion cache](https://emotion.sh/docs/@emotion/cache), pass it to the `emotionCache` property in `_document.tsx`: