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

[examples] Next.js examples v13 - fonts #34971

Merged
merged 7 commits into from
Nov 3, 2022
Merged

[examples] Next.js examples v13 - fonts #34971

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2040502
Update nextjs example to use @next/font for loading Roboto
PetroSilenius Oct 31, 2022
51d85c3
Update nextjs-with-typescript example to use @next/font for loading R…
PetroSilenius Oct 31, 2022
9b81cd5
Use latest version definement for @next/font
PetroSilenius Oct 31, 2022
66e6809
Set font display to 'swap'
PetroSilenius Oct 31, 2022
53f9d36
Restore * as React imports
PetroSilenius Oct 31, 2022
52801f7
Use multiple font weights added in next 13.0.1
PetroSilenius Nov 1, 2022
a8f3293
Fix prettier styling errors
PetroSilenius Nov 1, 2022
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
1 change: 1 addition & 0 deletions examples/nextjs-with-typescript/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@emotion/styled": "latest",
"@mui/icons-material": "latest",
"@mui/material": "latest",
"@next/font": "latest",
"next": "latest",
"react": "latest",
"react-dom": "latest"
Expand Down
8 changes: 2 additions & 6 deletions examples/nextjs-with-typescript/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../src/theme';
import theme, { roboto } from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Html lang="en" className={roboto.className}>
mnajdova marked this conversation as resolved.
Show resolved Hide resolved
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="shortcut icon" href="/favicon.ico" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<meta name="emotion-insertion-point" content="" />
{(this.props as any).emotionStyleTags}
</Head>
Expand Down
11 changes: 11 additions & 0 deletions examples/nextjs-with-typescript/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import { Roboto } from '@next/font/google';
import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';

export const roboto = Roboto({
weight: ['300', '400', '500', '700'],
subsets: ['latin'],
display: 'swap',
fallback: ['Helvetica', 'Arial', 'sans-serif'],
});

// Create a theme instance.
const theme = createTheme({
palette: {
Expand All @@ -14,6 +22,9 @@ const theme = createTheme({
main: red.A400,
},
},
typography: {
fontFamily: roboto.style.fontFamily,
},
PetroSilenius marked this conversation as resolved.
Show resolved Hide resolved
});

export default theme;
1 change: 1 addition & 0 deletions examples/nextjs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@emotion/styled": "latest",
"@mui/icons-material": "latest",
"@mui/material": "latest",
"@next/font": "latest",
"next": "latest",
"prop-types": "latest",
"react": "latest",
Expand Down
8 changes: 2 additions & 6 deletions examples/nextjs/pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../src/theme';
import theme, { roboto } from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Html lang="en" className={roboto.className}>
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="shortcut icon" href="/favicon.ico" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<meta name="emotion-insertion-point" content="" />
{this.props.emotionStyleTags}
</Head>
Expand Down
11 changes: 11 additions & 0 deletions examples/nextjs/src/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import { Roboto } from '@next/font/google';
import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';

export const roboto = Roboto({
weight: ['300', '400', '500', '700'],
subsets: ['latin'],
display: 'swap',
fallback: ['Helvetica', 'Arial', 'sans-serif'],
});

// Create a theme instance.
const theme = createTheme({
palette: {
Expand All @@ -14,6 +22,9 @@ const theme = createTheme({
main: red.A400,
},
},
typography: {
fontFamily: roboto.style.fontFamily,
},
});

export default theme;
Loading