Skip to content

Commit

Permalink
Update Next.js Readme
Browse files Browse the repository at this point in the history
  • Loading branch information
valentinpalkovic committed Dec 16, 2022
1 parent 4383d37 commit 0384b99
Showing 1 changed file with 54 additions and 0 deletions.
54 changes: 54 additions & 0 deletions code/frameworks/nextjs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -45,6 +49,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)
Expand Down Expand Up @@ -208,6 +214,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:

```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).
Expand Down

0 comments on commit 0384b99

Please sign in to comment.