diff --git a/docs/data/material/guides/nextjs/nextjs.md b/docs/data/material/guides/nextjs/nextjs.md index 4be2f9de562051..08ff785fc1b687 100644 --- a/docs/data/material/guides/nextjs/nextjs.md +++ b/docs/data/material/guides/nextjs/nextjs.md @@ -1,4 +1,4 @@ -# Next.js Integration +# Next.js integration

Learn how to use Material UI with Next.js

@@ -32,8 +32,8 @@ pnpm add @mui/material-nextjs @emotion/cache Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elements under the `` with it: ```diff - // app/layout.tsx -+ import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14 ++import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; + // or `v1X-appRouter` if you are using Next.js v1X export default function RootLayout(props) { const { children } = props; @@ -92,7 +92,11 @@ Inside the `pages/_document.tsx` file: - Import `DocumentHeadTags` and render it inside the ``. ```diff -+ import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v13-pagesRouter'; // or `v14-pagesRouter` if you are using Next.js v14 ++import { ++ DocumentHeadTags, ++ documentGetInitialProps, ++} from '@mui/material-nextjs/v13-pagesRouter'; + // or `v1X-pagesRouter` if you are using Next.js v1X export default function MyDocument(props) { return ( @@ -109,13 +113,17 @@ Inside the `pages/_document.tsx` file: ); } -+ MyDocument.getInitialProps = documentGetInitialProps; ++MyDocument.getInitialProps = async (ctx) => { ++ const finalProps = await documentGetInitialProps(ctx); ++ return finalProps; ++}; ``` Then, inside `pages/_app.tsx`, import the `AppCacheProvider` component and render it as the root element: ```diff -+ import { AppCacheProvider } from '@mui/material-nextjs/v13-pagesRouter'; // or `v14-pages` if you are using Next.js v14 ++import { AppCacheProvider } from '@mui/material-nextjs/v13-pagesRouter'; + // Or `v1X-pages` if you are using Next.js v1X export default function MyApp(props) { return ( @@ -134,7 +142,8 @@ Then, inside `pages/_app.tsx`, import the `AppCacheProvider` component and rende If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props interface: ```diff -+ import type { DocumentHeadTagsProps } from '@mui/material-nextjs/v13-pagesRouter'; // or `v14-pagesRouter` if you are using Next.js v14 ++ import type { DocumentHeadTagsProps } from '@mui/material-nextjs/v13-pagesRouter'; + // or `v1X-pagesRouter` if you are using Next.js v1X + export default function MyDocument(props: DocumentProps & DocumentHeadTagsProps) { ... diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 875fbab2b1326f..27d0a7d8e529a9 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -207,7 +207,7 @@ const pages: MuiPage[] = [ { pathname: '/material-ui/guides/shadow-dom', title: 'Shadow DOM' }, { pathname: '/material-ui/guides/nextjs', - title: 'Next.js Integration', + title: 'Next.js integration', newFeature: true, }, ], diff --git a/docs/translations/translations.json b/docs/translations/translations.json index d6eddef54c54a5..78d4af9c9f37de 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -454,7 +454,7 @@ "/material-ui/guides/content-security-policy": "Content Security Policy", "/material-ui/guides/right-to-left": "Right-to-left", "/material-ui/guides/shadow-dom": "Shadow DOM", - "/material-ui/guides/nextjs": "Next.js Integration", + "/material-ui/guides/nextjs": "Next.js integration", "/material-ui/experimental-api": "Experimental APIs", "/material-ui/experimental-api/classname-generator": "ClassName generator", "CSS theme variables": "CSS theme variables", diff --git a/packages/mui-material-nextjs/README.md b/packages/mui-material-nextjs/README.md index ee45a2d4e62360..602c842532ec9f 100644 --- a/packages/mui-material-nextjs/README.md +++ b/packages/mui-material-nextjs/README.md @@ -1,3 +1,3 @@ # @mui/material-nextjs -The official integration of Material-UI with Next.js. For full documentation, visit [Next.js Integration](material-ui/guides/nextjs/) page. +The official Material UI integration with Next.js. For the full documentation, visit [Next.js integration](https://mui.com/material-ui/guides/nextjs/) page. diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index e75425a90b07a8..c0487898537da6 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -6,9 +6,8 @@ "description": "Collection of utilities for integration between Material UI and Next.js.", "keywords": [ "react", - "react-component", - "mui", - "utils" + "next", + "material-ui" ], "repository": { "type": "git", @@ -19,7 +18,7 @@ "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "private package", + "homepage": "https://mui.com/material-ui/guides/nextjs/", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org"