Skip to content

Commit

Permalink
[material-nextjs] Support Next 15.0.0 in v5 (#44853)
Browse files Browse the repository at this point in the history
  • Loading branch information
DiegoAndai authored Dec 24, 2024
1 parent 0f4e27d commit e171453
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 7 deletions.
12 changes: 6 additions & 6 deletions docs/data/material/integrations/nextjs/nextjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ pnpm add @mui/material-nextjs @emotion/cache
Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elements under the `<body>` with it:

```diff title="app/layout.tsx"
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
// or `v1X-appRouter` if you are using Next.js v1X

export default function RootLayout(props) {
Expand Down Expand Up @@ -94,7 +94,7 @@ export default theme;
Then in `src/app/layout.tsx`, pass the theme to `ThemeProvider`:

```diff title="app/layout.tsx"
import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../theme';

Expand Down Expand Up @@ -180,7 +180,7 @@ Inside the `pages/_document.tsx` file:
+import {
+ DocumentHeadTags,
+ documentGetInitialProps,
+} from '@mui/material-nextjs/v13-pagesRouter';
+} from '@mui/material-nextjs/v15-pagesRouter';
// or `v1X-pagesRouter` if you are using Next.js v1X

export default function MyDocument(props) {
Expand All @@ -207,7 +207,7 @@ Inside the `pages/_document.tsx` file:
Then, inside `pages/_app.tsx`, import the `AppCacheProvider` component and render it as the root element:

```diff title="pages/_app.tsx"
+import { AppCacheProvider } from '@mui/material-nextjs/v13-pagesRouter';
+import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter';
// Or `v1X-pages` if you are using Next.js v1X

export default function MyApp(props) {
Expand Down Expand Up @@ -312,7 +312,7 @@ MyDocument.getInitialProps = async (ctx) => {
If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props interface:

```diff
+import type { DocumentHeadTagsProps } from '@mui/material-nextjs/v13-pagesRouter';
+import type { DocumentHeadTagsProps } from '@mui/material-nextjs/v15-pagesRouter';
// or `v1X-pagesRouter` if you are using Next.js v1X

+export default function MyDocument(props: DocumentProps & DocumentHeadTagsProps) {
Expand All @@ -328,7 +328,7 @@ In `pages/_app.tsx`, create a new theme and pass it to `ThemeProvider`:
import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { AppCacheProvider } from '@mui/material-nextjs/v13-pagesRouter';
import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { Roboto } from 'next/font/google';

Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material-nextjs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"@emotion/server": "^11.11.0",
"@mui/material": "^5.0.0",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"next": "^13.0.0 || ^14.0.0",
"next": "^13.0.0 || ^14.0.0 || ^15.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
Expand Down
1 change: 1 addition & 0 deletions packages/mui-material-nextjs/src/v15-appRouter/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../v13-appRouter';
1 change: 1 addition & 0 deletions packages/mui-material-nextjs/src/v15-pagesRouter/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../v13-pagesRouter';

0 comments on commit e171453

Please sign in to comment.