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 (
-
- )
-}
+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 (
-
- )
-}
+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 (
-
-
-
-
-
-
-
-
-
- )
- }
+export default function Document({ css }) {
+ return (
+
+
+
+
+
+
+
+
+
+ )
}
diff --git a/examples/with-facebook-pixel/pages/_document.js b/examples/with-facebook-pixel/pages/_document.js
index b3a330dbcba7..9a42bc679a51 100644
--- a/examples/with-facebook-pixel/pages/_document.js
+++ b/examples/with-facebook-pixel/pages/_document.js
@@ -1,25 +1,23 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document'
import { FB_PIXEL_ID } from '../lib/fpixel'
-export default class MyDocument extends Document {
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
-
- )
- }
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
}
diff --git a/examples/with-google-analytics-amp/pages/_document.js b/examples/with-google-analytics-amp/pages/_document.js
index 0f8dc4abb0c4..c09f43433d5c 100644
--- a/examples/with-google-analytics-amp/pages/_document.js
+++ b/examples/with-google-analytics-amp/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document'
import { useAmp } from 'next/amp'
import { GA_TRACKING_ID } from '../lib/gtag'
@@ -10,63 +10,61 @@ function AmpWrap({ ampOnly, nonAmp }) {
return !isAmp && nonAmp
}
-export default class MyDocument extends Document {
- render() {
- return (
-
-
-
-
-
+export default function Document() {
+ return (
+
+
+
+
+
- {/* AMP - Google Analytics */}
-
- }
- />
+ },
+ }}
+ />
+ }
+ />
- {/* Non-AMP - Google Analytics */}
-
-
-