[docs][material-ui] Update Next.js font optimization guide (#43196)

mui · Sep 10, 2024 · 9910e58 · 9910e58
1 parent 56366b3
commit 9910e58
Showing 1 changed file with 21 additions and 16 deletions.
diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md
@@ -67,42 +67,44 @@ Use the `options` prop to override the default [cache options](https://emotion.s
   </AppRouterCacheProvider>
 ```
 
-### 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 (
      <html lang="en">
-       <body>
++      <body className={roboto.variable}>
           <AppRouterCacheProvider>
 +           <ThemeProvider theme={theme}>
               {children}
@@ -317,9 +319,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';
@@ -333,11 +335,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),
 +  },
 +});
 
@@ -347,7 +350,9 @@ In `pages/_app.tsx`, create a new theme and pass it to `ThemeProvider`:
     <AppCacheProvider {...props}>
       <Head>...</Head>
 +     <ThemeProvider theme={theme}>
-        <Component {...pageProps} />
++       <main className={roboto.variable}>
+          <Component {...pageProps} />
++       </main>
 +     </ThemeProvider>
     </AppCacheProvider>
   );