From 2d6b56086ea161e3e135927d7d79b3439210e726 Mon Sep 17 00:00:00 2001 From: Darsh Patel Date: Thu, 29 Apr 2021 00:49:22 +0530 Subject: [PATCH 1/2] Fix: with-passport example dependency issue (#24567) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fixes #24401 Simply bumping `swr` to the latest version seems to fix the issue. đŸ„‚ Couldn't find a consistent pattern across the examples, but most examples are flexible with swr version and use the semver caret. Very standard use of the useSWR hook is there in the example with nothing obviously version specific. --- examples/with-passport/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-passport/package.json b/examples/with-passport/package.json index 45126d8e50720..9ea337c320ff6 100644 --- a/examples/with-passport/package.json +++ b/examples/with-passport/package.json @@ -14,7 +14,7 @@ "passport-local": "1.0.0", "react": "latest", "react-dom": "latest", - "swr": "0.3.0", + "swr": "^0.5.5", "uuid": "8.3.1" }, "license": "MIT" From 972137444031b3b7940aaa518f82c19675b21780 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Wed, 28 Apr 2021 17:11:05 -0500 Subject: [PATCH 2/2] Add documentation on Font Optimization. (#24572) --- docs/basic-features/font-optimization.md | 88 ++++++++++++++++++++++++ docs/manifest.json | 4 ++ 2 files changed, 92 insertions(+) create mode 100644 docs/basic-features/font-optimization.md diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md new file mode 100644 index 0000000000000..dfb91f992d116 --- /dev/null +++ b/docs/basic-features/font-optimization.md @@ -0,0 +1,88 @@ +--- +description: Next.js supports built-in web font optimization to inline font CSS. Learn more here. +--- + +# Font Optimization + +Since version **10.2**, Next.js has built-in web font optimization. + +By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch font declarations. This results in improvements to [First Contentful Paint (FCP)](https://web.dev/fcp/) and [Largest Contentful Paint (LCP)](https://vercel.com/blog/core-web-vitals#largest-contentful-paint). For example: + +```js +// Before + + +// After + +``` + +## Usage + +To add a web font to your Next.js application, override `next/head`. For example, you can add a font to a specific page: + +```js +// pages/index.js + +import Head from 'next/head' + +export default function IndexPage() { + return ( +
+ + + +

Hello world!

+
+ ) +} +``` + +or to your entire application with a [Custom `Document`](/docs/advanced-features/custom-document.md). + +```js +// pages/_document.js + +import Document, { Html, Head, Main, NextScript } from 'next/document' + +class MyDocument extends Document { + render() { + return ( + + + + + +
+ + + + ) + } +} + +export default MyDocument +``` + +Automatic Webfont Optimization currently supports Google Fonts, 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. + +## Related + +For more information on what to do next, we recommend the following sections: + +
+ + Custom Document + Learn how to augment your application's html and body tags. + +
diff --git a/docs/manifest.json b/docs/manifest.json index a9dcd38126b84..9d5cd74aa1c40 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -25,6 +25,10 @@ "title": "Image Optimization", "path": "/docs/basic-features/image-optimization.md" }, + { + "title": "Font Optimization", + "path": "/docs/basic-features/font-optimization.md" + }, { "title": "Static File Serving", "path": "/docs/basic-features/static-file-serving.md"