diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 78c83bb8dd6b63..036d6a3efbe575 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -32,7 +32,7 @@ pnpm add @mui/material-nextjs @emotion/cache Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elements under the `` 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) { @@ -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'; @@ -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) { @@ -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) { @@ -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) { @@ -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'; diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index 2f3c574c07176e..1734bd413306eb 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -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": { diff --git a/packages/mui-material-nextjs/src/v15-appRouter/index.ts b/packages/mui-material-nextjs/src/v15-appRouter/index.ts new file mode 100644 index 00000000000000..fc4bb1deaba8f4 --- /dev/null +++ b/packages/mui-material-nextjs/src/v15-appRouter/index.ts @@ -0,0 +1 @@ +export * from '../v13-appRouter'; diff --git a/packages/mui-material-nextjs/src/v15-pagesRouter/index.ts b/packages/mui-material-nextjs/src/v15-pagesRouter/index.ts new file mode 100644 index 00000000000000..695035caa34c5c --- /dev/null +++ b/packages/mui-material-nextjs/src/v15-pagesRouter/index.ts @@ -0,0 +1 @@ +export * from '../v13-pagesRouter';