[docs] Add Next.js font optimization section to Pigment CSS migration (#43631)

siriwatknp · web-flow · commit dcc17031aa37 · 2024-09-07T21:26:33.000+07:00
diff --git a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
@@ -212,6 +212,45 @@ yarn dev
 
 Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS.
 
+### Next.js font optimization
+
+If you are using `next/font` to optimize font loading, pass a CSS variable name to the `variable` property of the font configuration and use it in the body className:
+
+```diff title="app/layout.tsx"
+ import { Roboto } from 'next/font/google';
+
+ const roboto = Roboto({
+   weight: ['300', '400', '500', '700'],
+   subsets: ['latin'],
+   display: 'swap',
++  variable: '--my-font-family',
+ });
+
+export default function RootLayout(props) {
+   const { children } = props;
+   return (
+     <html lang="en">
++      <body className={roboto.variable}>
+          {children}
+       </body>
+     </html>
+   );
+ }
+```
+
+Finally, update the `typography.fontFamily` value with the variable created in the previous step:
+
+```diff title="next.config.mjs"
+ const pigmentConfig = {
+   transformLibraries: ['@mui/material'],
+   theme: createTheme({
++    typography: {
++      fontFamily: 'var(--my-font-family)',
++    },
+   }),
+ };
+```
+
 ### Typescript
 
 If you are using TypeScript, you need to extend the Pigment CSS theme types with Material UI `Theme`.
@@ -274,7 +313,7 @@ We recommend reading the rest of the guide below to learn about the new styling
 Since Pigment CSS is a build-time extraction tool, it does not support owner state through callbacks. Here is an example that will throw an error at build time:
 
 ```js
-const theme = extendTheme({
+const theme = createTheme({
   components: {
     MuiCard: {
       styleOverrides: {
@@ -307,7 +346,7 @@ If you have a dynamic color based on the theme palette, you can use the `variant
 <codeblock>
 
 ```js before
-const theme = extendTheme({
+const theme = createTheme({
   components: {
     MuiCard: {
       styleOverrides: {
@@ -321,7 +360,7 @@ const theme = extendTheme({
 ```
 
 ```js after
-const theme = extendTheme({
+const theme = createTheme({
   components: {
     MuiCard: {
       styleOverrides: {
@@ -352,9 +391,9 @@ Use `DefaultPropsProvider` in your main application file and move all the compon
 <codeblock>
 
 ```diff next.config|vite.config
- import { extendTheme } from '@mui/material';
+ import { createTheme } from '@mui/material';
 
- const customTheme = extendTheme({
+ const customTheme = createTheme({
    // ...other tokens.
    components: {
      MuiButtonBase: {
@@ -639,7 +678,7 @@ Update the config file with the following code to enable right-to-left support:
 
 ```diff
  const pigmentConfig = {
-   theme: extendTheme(),
+   theme: createTheme(),
 +  css: {
 +    // Specify your default CSS authoring direction
 +    defaultDirection: 'ltr',
