Merge pull request #20291 from storybookjs/valentin/next-font

NextJS: Support @next/font

code/frameworks/nextjs/README.md

@@ -15,6 +15,10 @@
     - [Local Images](#local-images)
     - [Remote Images](#remote-images)
     - [AVIF](#avif)
+  - [Next.js Font Optimization](#nextjs-font-optimization)
+    - [@next/font/google](#nextfontgoogle)
+    - [@next/font/local](#nextfontlocal)
+    - [Not supported features of @next/font](#not-supported-features-of-nextfont)
   - [Next.js Routing](#nextjs-routing)
     - [Overriding defaults](#overriding-defaults)
     - [Global Defaults](#global-defaults)
@@ -46,6 +50,8 @@
 
 👉 [Next.js's Image Component](#nextjss-image-component)
 
+👉 [Next.js Font Optimization](#nextjs-font-optimization)
+
 👉 [Next.js Routing (next/router)](#nextjs-routing)
 
 👉 [Next.js Navigation (next/navigation)](#nextjs-navigation)
@@ -209,6 +215,54 @@ export default function Home() {
 
 This format is not supported by this framework yet. Feel free to [open up an issue](https://github.com/storybookjs/storybook/issues) if this is something you want to see.
 
+### Next.js Font Optimization
+
+[@next/font](https://nextjs.org/docs/basic-features/font-optimization) is partially supported in Storybook. The packages `@next/font/google` and `@next/font/local` are supported.
+
+#### @next/font/google
+
+You don't have to do anything. `@next/font/google` is supported out of the box.
+
+#### @next/font/local
+
+For local fonts you have to define the [src](https://nextjs.org/docs/api-reference/next/font#src) property.
+The path is relative to the directory where the font loader function is called.
+
+If the following component defines your localFont like this:
+
+```js
+// src/components/MyComponent.js
+import localFont from '@next/font/local';
+
+const localRubikStorm = localFont({ src: './fonts/RubikStorm-Regular.ttf' });
+```
+
+You have to tell Storybook where the `fonts` directory is located. The `from` value is relative to the `.storybook` directory. The `to` value is relative to the execution context of Storybook. Very likely it is the root of your project.
+
+```js
+// .storybook/main.js
+module.exports = {
+  ...
+  "staticDirs": [
+    {
+      from: '../src/components/fonts',
+      to: 'src/components/fonts'
+    }
+  ],
+}
+```
+
+#### Not supported features of @next/font
+
+The following features are not supported (yet). Support for these features might be planned for the future:
+
+- [Support font loaders configuration in next.config.js](https://nextjs.org/docs/basic-features/font-optimization#specifying-a-subset)
+- [fallback](https://nextjs.org/docs/api-reference/next/font#fallback) option
+- [adjustFontFallback](https://nextjs.org/docs/api-reference/next/font#adjustfontfallback) option
+- [declarations](https://nextjs.org/docs/api-reference/next/font#declarations) option
+- [preload](https://nextjs.org/docs/api-reference/next/font#preload) option gets ignored. Storybook handles Font loading its own way.
+- [display](https://nextjs.org/docs/api-reference/next/font#display) option gets ignored. All fonts are loaded with display set to "block" to make Storybook load the font properly.
+
 ### Next.js Routing
 
 [Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions ctions panel if you have the [Storybook actions addon](https://storybook.js.org/docs/react/essentials/actions).

code/frameworks/nextjs/package.json

@@ -59,6 +59,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@next/font": "^13.0.7",
     "@storybook/addon-actions": "7.0.0-beta.12",
     "@storybook/builder-webpack5": "7.0.0-beta.12",
     "@storybook/core-common": "7.0.0-beta.12",
@@ -81,7 +82,10 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/types": "^7.20.5",
     "@storybook/addon-actions": "7.0.0-beta.12",
+    "@types/babel__core": "^7",
     "next": "^13.0.5",
     "typescript": "^4.9.3",
     "webpack": "^5.65.0"
@@ -115,7 +119,8 @@
       "./src/index.ts",
       "./src/preset.ts",
       "./src/preview.tsx",
-      "./src/next-image-loader-stub.ts"
+      "./src/next-image-loader-stub.ts",
+      "./src/font/webpack/loader/storybook-nextjs-font-loader.ts"
     ],
     "platform": "node"
   },