Skip to content

Commit

Permalink
[material-ui][docs] Polish the Next.js integration page (#40317)
Browse files Browse the repository at this point in the history
Signed-off-by: Olivier Tassinari <[email protected]>
Co-authored-by: Danilo Leal <[email protected]>
  • Loading branch information
oliviertassinari and danilo-leal authored Dec 28, 2023
1 parent e13f5d0 commit cb3d718
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 14 deletions.
23 changes: 16 additions & 7 deletions docs/data/material/guides/nextjs/nextjs.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Next.js Integration
# Next.js integration

<p class="description">Learn how to use Material UI with Next.js</p>

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 (
Expand All @@ -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 (
Expand All @@ -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) {
...
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
],
Expand Down
2 changes: 1 addition & 1 deletion docs/translations/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material-nextjs/README.md
Original file line number Diff line number Diff line change
@@ -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.
7 changes: 3 additions & 4 deletions packages/mui-material-nextjs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
Expand Down

1 comment on commit cb3d718

@pooooriya
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can I add some full examples to the example folder?
i think it need to be a full example to better understand !
i have to read your source code to know what exactly everthing happend !
I try to add your package to my new project and everything goes well !!!
well done !

Please sign in to comment.