[material-ui][docs] Polish the Next.js integration page (#40317)

oliviertassinari · danilo-leal · web-flow · commit cb3d718e075a · 2023-12-28T18:11:40.000+01:00
Signed-off-by: Olivier Tassinari &lt;olivier.tassinari@gmail.com&gt;
Co-authored-by: Danilo Leal &lt;67129314+danilo-leal@users.noreply.github.com&gt;
diff --git 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
 
 <p class="description">Learn how to use Material UI with Next.js</p>
 
@@ -32,8 +32,8 @@ pnpm add @mui/material-nextjs @emotion/cache
 Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elements under the `<body>` 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 `<Head>`.
 
 ```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
@@ -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
@@ -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
@@ -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
@@ -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"

Original file line number	Diff line number	Diff line change
`@@ -207,7 +207,7 @@ const pages: MuiPage[] = [`
`207`	`207`	`{ pathname: '/material-ui/guides/shadow-dom', title: 'Shadow DOM' },`
`208`	`208`	`{`
`209`	`209`	`pathname: '/material-ui/guides/nextjs',`
`210`		`- title: 'Next.js Integration',`
	`210`	`+ title: 'Next.js integration',`
`211`	`211`	`newFeature: true,`
`212`	`212`	`},`
`213`	`213`	`],`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`# @mui/material-nextjs`
`2`	`2`
`3`		`-The official integration of Material-UI with Next.js. For full documentation, visit [Next.js Integration](material-ui/guides/nextjs/) page.`
	`3`	`+The official Material UI integration with Next.js. For the full documentation, visit [Next.js integration](https://mui.com/material-ui/guides/nextjs/) page.`