diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 75bcafea957d70..d45ddbbb127162 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -73,42 +73,44 @@ Use the `options` prop to override the default [cache options](https://emotion.s ``` -### Theming +### Font optimization -Create a new file and export a custom theme that includes the `'use client';` directive: +To integrate [Next.js font optimization](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) with Material UI, create a new file with the `'use client';` directive. +Then create a theme using `var(--font-roboto)` as a value for the `typography.fontFamily` field. ```js title="src/theme.ts" 'use client'; -import { Roboto } from 'next/font/google'; import { createTheme } from '@mui/material/styles'; -const roboto = Roboto({ - weight: ['300', '400', '500', '700'], - subsets: ['latin'], - display: 'swap', -}); - const theme = createTheme({ typography: { - fontFamily: roboto.style.fontFamily, + fontFamily: 'var(--font-roboto)', }, }); export default theme; ``` -Then in `src/app/layout.tsx`, pass the theme to `ThemeProvider`: +Finally, in `src/app/layout.tsx`, pass the theme to the `ThemeProvider`: ```diff title="app/layout.tsx" import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; ++import { Roboto } from 'next/font/google'; +import { ThemeProvider } from '@mui/material/styles'; +import theme from '../theme'; ++const roboto = Roboto({ ++ weight: ['300', '400', '500', '700'], ++ subsets: ['latin'], ++ display: 'swap', ++ variable: '--font-roboto', ++}); + export default function RootLayout(props) { const { children } = props; return ( - ++ + {children} @@ -326,9 +328,9 @@ If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props } ``` -### Theming +### Font optimization -In `pages/_app.tsx`, create a new theme and pass it to `ThemeProvider`: +To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) with Material UI, open `pages/_app.tsx` and create a theme using `var(--font-roboto)` as a value for the `typography.fontFamily` field. ```diff title="pages/_app.tsx" import * as React from 'react'; @@ -342,11 +344,12 @@ In `pages/_app.tsx`, create a new theme and pass it to `ThemeProvider`: + weight: ['300', '400', '500', '700'], + subsets: ['latin'], + display: 'swap', ++ variable: '--font-roboto', +}); +const theme = createTheme({ + typography: { -+ fontFamily: roboto.style.fontFamily, ++ fontFamily: var(--font-roboto), + }, +}); @@ -356,7 +359,9 @@ In `pages/_app.tsx`, create a new theme and pass it to `ThemeProvider`: ... + - ++
+ ++
+ );