diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index bcd1498072fa..139a09b32d5d 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -53,7 +53,13 @@ class MyDocument extends Document { export default MyDocument ``` -Note that we don't recommend adding fonts with `next/head`, as this only applies the font to the particular page and won't work with a streaming architecture. +Although it's possible to add fonts in a page with [`next/head`](/docs/api-reference/next/head) it comes with some drawbacks: + +- It only applies the font to that particular page. +- The font optimization will only work on page load, not on client side navigation. +- It won't work with a streaming architecture. + +Thus it's highly recommended to add the font in a [Custom `Document`](/docs/advanced-features/custom-document.md), like in the code snippet above. Automatic Webfont Optimization currently supports Google Fonts and Typekit with support for other font providers coming soon. We're also planning to add control over [loading strategies](https://github.com/vercel/next.js/issues/21555) and `font-display` values. diff --git a/examples/auth-with-stytch/pages/_document.tsx b/examples/auth-with-stytch/pages/_document.tsx index 83d9080a67d7..496f4c465e5c 100644 --- a/examples/auth-with-stytch/pages/_document.tsx +++ b/examples/auth-with-stytch/pages/_document.tsx @@ -1,33 +1,18 @@ -import Document, { - Html, - Head, - Main, - NextScript, - DocumentContext, -} from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -class MyDocument extends Document { - static async getInitialProps(ctx: DocumentContext) { - const initialProps = await Document.getInitialProps(ctx) - return { ...initialProps } - } - - render() { - return ( - - - - - -
- - - - ) - } +export default function Document() { + return ( + + + + + +
+ + + + ) } - -export default MyDocument diff --git a/examples/blog-starter/pages/_document.tsx b/examples/blog-starter/pages/_document.tsx index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/blog-starter/pages/_document.tsx +++ b/examples/blog-starter/pages/_document.tsx @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/blog/pages/_document.tsx b/examples/blog/pages/_document.tsx index 40ab3703fb31..d480d60cc696 100644 --- a/examples/blog/pages/_document.tsx +++ b/examples/blog/pages/_document.tsx @@ -1,47 +1,31 @@ -import Document, { - Html, - Head, - Main, - NextScript, - DocumentContext, -} from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -class MyDocument extends Document { - static async getInitialProps(ctx: DocumentContext) { - const initialProps = await Document.getInitialProps(ctx) - return { ...initialProps } +export default function Document() { + const meta = { + title: 'Next.js Blog Starter Kit', + description: 'Clone and deploy your own Next.js portfolio in minutes.', + image: 'https://assets.vercel.com/image/upload/q_auto/front/vercel/dps.png', } - render() { - const meta = { - title: 'Next.js Blog Starter Kit', - description: 'Clone and deploy your own Next.js portfolio in minutes.', - image: - 'https://assets.vercel.com/image/upload/q_auto/front/vercel/dps.png', - } - - return ( - - - - - - - - - - - - - - - -
- - - - ) - } + return ( + + + + + + + + + + + + + + + +
+ + + + ) } - -export default MyDocument diff --git a/examples/cms-contentful/pages/_document.js b/examples/cms-contentful/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-contentful/pages/_document.js +++ b/examples/cms-contentful/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-cosmic/pages/_document.js b/examples/cms-cosmic/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-cosmic/pages/_document.js +++ b/examples/cms-cosmic/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-datocms/pages/_document.js b/examples/cms-datocms/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-datocms/pages/_document.js +++ b/examples/cms-datocms/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-drupal/pages/_document.js b/examples/cms-drupal/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-drupal/pages/_document.js +++ b/examples/cms-drupal/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-ghost/pages/_document.js b/examples/cms-ghost/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-ghost/pages/_document.js +++ b/examples/cms-ghost/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-graphcms/pages/_document.js b/examples/cms-graphcms/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-graphcms/pages/_document.js +++ b/examples/cms-graphcms/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-kontent/pages/_document.js b/examples/cms-kontent/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-kontent/pages/_document.js +++ b/examples/cms-kontent/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-prepr/pages/_document.js b/examples/cms-prepr/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-prepr/pages/_document.js +++ b/examples/cms-prepr/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-prismic/pages/_document.js b/examples/cms-prismic/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-prismic/pages/_document.js +++ b/examples/cms-prismic/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-sanity/pages/_document.js b/examples/cms-sanity/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-sanity/pages/_document.js +++ b/examples/cms-sanity/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-storyblok/pages/_document.js b/examples/cms-storyblok/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-storyblok/pages/_document.js +++ b/examples/cms-storyblok/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-strapi/pages/_document.js b/examples/cms-strapi/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-strapi/pages/_document.js +++ b/examples/cms-strapi/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-takeshape/pages/_document.js b/examples/cms-takeshape/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-takeshape/pages/_document.js +++ b/examples/cms-takeshape/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-tina/pages/_document.js b/examples/cms-tina/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-tina/pages/_document.js +++ b/examples/cms-tina/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-umbraco-heartcore/pages/_document.js b/examples/cms-umbraco-heartcore/pages/_document.js index c55951c0d5da..54e8bf3e2a29 100755 --- a/examples/cms-umbraco-heartcore/pages/_document.js +++ b/examples/cms-umbraco-heartcore/pages/_document.js @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/cms-wordpress/pages/_document.tsx b/examples/cms-wordpress/pages/_document.tsx index c55951c0d5da..54e8bf3e2a29 100644 --- a/examples/cms-wordpress/pages/_document.tsx +++ b/examples/cms-wordpress/pages/_document.tsx @@ -1,15 +1,13 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } +export default function Document() { + return ( + + + +
+ + + + ) } diff --git a/examples/data-fetch/package.json b/examples/data-fetch/package.json index 349de02f4d84..6d7b78181046 100644 --- a/examples/data-fetch/package.json +++ b/examples/data-fetch/package.json @@ -6,8 +6,13 @@ "start": "next start" }, "dependencies": { - "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "next": "12.2.5", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "18.7.11", + "@types/react": "18.0.17", + "typescript": "4.7.4" } } diff --git a/examples/data-fetch/pages/index.js b/examples/data-fetch/pages/index.tsx similarity index 52% rename from examples/data-fetch/pages/index.js rename to examples/data-fetch/pages/index.tsx index d668c07e8fd6..a85b350fab30 100644 --- a/examples/data-fetch/pages/index.js +++ b/examples/data-fetch/pages/index.tsx @@ -1,25 +1,26 @@ import Link from 'next/link' - -function Index({ stars }) { - return ( -
-

Next.js has {stars} ⭐️

- - How about preact? - -
- ) -} +import type { InferGetStaticPropsType } from 'next' +import type { Repository } from '../types/github' export async function getStaticProps() { const res = await fetch('https://api.github.com/repos/vercel/next.js') - const json = await res.json() - + const data: Repository = await res.json() return { props: { - stars: json.stargazers_count, + stars: data.stargazers_count, }, } } -export default Index +export default function IndexPage({ + stars, +}: InferGetStaticPropsType) { + return ( + <> +

Next.js has {stars} ⭐️

+ + How about preact? + + + ) +} diff --git a/examples/data-fetch/pages/preact-stars.js b/examples/data-fetch/pages/preact-stars.tsx similarity index 57% rename from examples/data-fetch/pages/preact-stars.js rename to examples/data-fetch/pages/preact-stars.tsx index 9039129474ed..f7e7f70e3978 100644 --- a/examples/data-fetch/pages/preact-stars.js +++ b/examples/data-fetch/pages/preact-stars.tsx @@ -1,20 +1,10 @@ import Link from 'next/link' - -function PreactStars({ stars }) { - return ( -
-

Preact has {stars} ⭐

- - I bet Next.js has more stars (?) - -
- ) -} +import type { InferGetStaticPropsType } from 'next' +import type { Repository } from '../types/github' export async function getStaticProps() { const res = await fetch('https://api.github.com/repos/preactjs/preact') - const json = await res.json() - + const json: Repository = await res.json() return { props: { stars: json.stargazers_count, @@ -22,4 +12,15 @@ export async function getStaticProps() { } } -export default PreactStars +export default function PreactStarsPage({ + stars, +}: InferGetStaticPropsType) { + return ( + <> +

Preact has {stars} ⭐

+ + I bet Next.js has more stars (?) + + + ) +} diff --git a/examples/data-fetch/tsconfig.json b/examples/data-fetch/tsconfig.json new file mode 100644 index 000000000000..93a83a407c40 --- /dev/null +++ b/examples/data-fetch/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/data-fetch/types/github.d.ts b/examples/data-fetch/types/github.d.ts new file mode 100644 index 000000000000..1d373d98bc27 --- /dev/null +++ b/examples/data-fetch/types/github.d.ts @@ -0,0 +1,10 @@ +// For simplicity we are creating our own types here. +// If you want the full types check out: +// https://github.com/octokit/openapi-types.ts +export type Repository = { + id: number + name: string + full_name: string + stargazers_count: number + private: boolean +} & Record diff --git a/examples/with-babel-macros/pages/_document.js b/examples/with-babel-macros/pages/_document.js index dfbe440013fd..eb39cf4e4fda 100644 --- a/examples/with-babel-macros/pages/_document.js +++ b/examples/with-babel-macros/pages/_document.js @@ -1,17 +1,15 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - - - -
- - - - ) - } + + +
+ + + + ) } diff --git a/examples/with-portals/pages/_document.js b/examples/with-portals/pages/_document.js index 9b7ed4536e34..980f43e2324d 100644 --- a/examples/with-portals/pages/_document.js +++ b/examples/with-portals/pages/_document.js @@ -1,17 +1,15 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { - render() { - return ( - - - -
- {/* Here we will mount our modal portal */} -