From c94999de6adbb7f317d0873fcb934a2f41e241cf Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 6 Aug 2024 15:10:42 +0700 Subject: [PATCH 1/7] update font optimization --- .../material/integrations/nextjs/nextjs.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 75bcafea957d70..5741e97a7d6e0d 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -73,9 +73,10 @@ 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 with Material UI, create a new file with `'use client';` directive. +Then, pass the `.variable` as a value to the `typography.fontFamily` theme. ```js title="src/theme.ts" 'use client'; @@ -86,18 +87,19 @@ const roboto = Roboto({ weight: ['300', '400', '500', '700'], subsets: ['latin'], display: 'swap', + variable: '--font-roboto', }); const theme = createTheme({ typography: { - fontFamily: roboto.style.fontFamily, + fontFamily: roboto.variable, }, }); 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'; @@ -326,9 +328,10 @@ If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props } ``` -### Theming +### Font optimization + +To integrate Next.js font optimization with Material UI, opens `pages/_app.tsx` and pass the `.variable` as a value to the `typography.fontFamily` theme. -In `pages/_app.tsx`, create a new theme and pass it to `ThemeProvider`: ```diff title="pages/_app.tsx" import * as React from 'react'; @@ -342,11 +345,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: roboto.variable, + }, +}); From e624ca22e763f286d193eb08e363159dabdd760c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 6 Aug 2024 15:12:56 +0700 Subject: [PATCH 2/7] link to nextjs docs --- docs/data/material/integrations/nextjs/nextjs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 5741e97a7d6e0d..50f80e21e1ac0f 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -75,7 +75,7 @@ Use the `options` prop to override the default [cache options](https://emotion.s ### Font optimization -To integrate Next.js font optimization with Material UI, create a new file with `'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 `'use client';` directive. Then, pass the `.variable` as a value to the `typography.fontFamily` theme. ```js title="src/theme.ts" @@ -330,7 +330,7 @@ If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props ### Font optimization -To integrate Next.js font optimization with Material UI, opens `pages/_app.tsx` and pass the `.variable` as a value to the `typography.fontFamily` theme. +To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) with Material UI, opens `pages/_app.tsx` and pass the `.variable` as a value to the `typography.fontFamily` theme. ```diff title="pages/_app.tsx" From 01287babcf21211959051ae1ab1a5cac9cf2f08d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 6 Aug 2024 15:49:37 +0700 Subject: [PATCH 3/7] prettier --- docs/data/material/integrations/nextjs/nextjs.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 50f80e21e1ac0f..3b26824a7adfb7 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -332,7 +332,6 @@ If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) with Material UI, opens `pages/_app.tsx` and pass the `.variable` as a value to the `typography.fontFamily` theme. - ```diff title="pages/_app.tsx" import * as React from 'react'; import Head from 'next/head'; From 171f318364814967cbf6053e633c000d47768f4c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 6 Aug 2024 18:17:47 +0700 Subject: [PATCH 4/7] fix content --- .../material/integrations/nextjs/nextjs.md | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 3b26824a7adfb7..c81a644f824ff8 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -76,20 +76,12 @@ Use the `options` prop to override the default [cache options](https://emotion.s ### Font optimization To integrate [Next.js font optimization](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) with Material UI, create a new file with `'use client';` directive. -Then, pass the `.variable` as a value to the `typography.fontFamily` theme. +Then, create a theme using `var(--font-roboto)` as a value to 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', - variable: '--font-roboto', -}); - const theme = createTheme({ typography: { fontFamily: roboto.variable, @@ -103,14 +95,22 @@ 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} @@ -330,7 +330,7 @@ If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props ### Font optimization -To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) with Material UI, opens `pages/_app.tsx` and pass the `.variable` as a value to the `typography.fontFamily` theme. +To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) with Material UI, opens `pages/_app.tsx` and create a theme using `var(--font-roboto)` as a value to the `typography.fontFamily` field. ```diff title="pages/_app.tsx" import * as React from 'react'; @@ -349,7 +349,7 @@ To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building- +const theme = createTheme({ + typography: { -+ fontFamily: roboto.variable, ++ fontFamily: var(--font-roboto), + }, +}); @@ -359,7 +359,9 @@ To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building- ... + - ++
+ ++
+ ); From b13a62798a10e4595a8f0d6b35f078e1161402c2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 6 Aug 2024 20:43:47 +0700 Subject: [PATCH 5/7] fix non breaking space --- docs/data/material/integrations/nextjs/nextjs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index c81a644f824ff8..56e4ae2f632d95 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -75,7 +75,7 @@ Use the `options` prop to override the default [cache options](https://emotion.s ### Font optimization -To integrate [Next.js font optimization](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) with Material UI, create a new file with `'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 `'use client';` directive. Then, create a theme using `var(--font-roboto)` as a value to the `typography.fontFamily` field. ```js title="src/theme.ts" @@ -330,7 +330,7 @@ If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props ### Font optimization -To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) with Material UI, opens `pages/_app.tsx` and create a theme using `var(--font-roboto)` as a value to the `typography.fontFamily` field. +To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) with Material UI, opens `pages/_app.tsx` and create a theme using `var(--font-roboto)` as a value to the `typography.fontFamily` field. ```diff title="pages/_app.tsx" import * as React from 'react'; From f2f266b4c0fb3ffbc5b74ebd8b5d245487374f47 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 8 Aug 2024 10:25:28 +0700 Subject: [PATCH 6/7] fix variable --- docs/data/material/integrations/nextjs/nextjs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 56e4ae2f632d95..e3501661deecdc 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -84,7 +84,7 @@ import { createTheme } from '@mui/material/styles'; const theme = createTheme({ typography: { - fontFamily: roboto.variable, + fontFamily: 'var(--font-roboto)', }, }); From 000cd1b1ea830edb0cd92d0c6d2b00d09edd6828 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 6 Sep 2024 14:45:41 +0700 Subject: [PATCH 7/7] Apply suggestions from code review Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Siriwat K --- docs/data/material/integrations/nextjs/nextjs.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index e3501661deecdc..d45ddbbb127162 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -75,8 +75,8 @@ Use the `options` prop to override the default [cache options](https://emotion.s ### Font optimization -To integrate [Next.js font optimization](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) with Material UI, create a new file with `'use client';` directive. -Then, create a theme using `var(--font-roboto)` as a value to the `typography.fontFamily` field. +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'; @@ -330,7 +330,7 @@ If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props ### Font optimization -To integrate [Next.js font optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) with Material UI, opens `pages/_app.tsx` and create a theme using `var(--font-roboto)` as a value to the `typography.fontFamily` field. +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';