Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Sep 10, 2024
Merged

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

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c94999d
update font optimization
siriwatknp Aug 6, 2024
e624ca2
link to nextjs docs
siriwatknp Aug 6, 2024
01287ba
prettier
siriwatknp Aug 6, 2024
171f318
fix content
siriwatknp Aug 6, 2024
b13a627
fix non breaking space
siriwatknp Aug 6, 2024
f2f266b
fix variable
siriwatknp Aug 8, 2024
000cd1b
Apply suggestions from code review
siriwatknp Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 21 additions & 16 deletions docs/data/material/integrations/nextjs/nextjs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,42 +73,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}
Expand Down Expand Up @@ -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';
Expand All @@ -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),
+ },
+});

Expand All @@ -356,7 +359,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>
);
Expand Down