storybook addon next
v1.8.0
このアドオンは、 @StoryBook/NextJSを支持して非難されています。それはすべてのstorybook-addon-nextのやることをサポートしています！私は彼らと一緒にこれを開発することにも取り組んだので、あなたは良い手にあるはずです。
移行方法の詳細については、移行ドキュメントを参照してください。
？ next.jsの構成サポートはありません：webpack configの書き込みとデバッグにうんざりしていませんか？ next.jsが箱から出してサポートするもの、このアドオンはストーリーブックで可能になります
next.jsの画像コンポーネント（部分的なサポート）
next.jsルーティング
SASS/SCSS
CSS/SASS/SCSSモジュール
スタイルJSX
postcss
絶対輸入
ランタイム構成
カスタムWebpack Config
タイプスクリプト
.js拡張機能ではなく.mjs拡張機能を使用します（ie next.config.js not next.config.mjs ）任意の例を実行するには、最初にこのレポのルートで
yarn build実行してアドオンを構築します。
yarnを使用してstorybook-addon-nextをインストールする：
yarn add --dev storybook-addon-nextまたはnpm ：
npm install --save-dev storybook-addon-next // .storybook/main.js
module . exports = {
// other config ommited for brevity
addons : [
// ...
'storybook-addon-next'
// ...
]
}??それでおしまい！サポートされている機能は、箱から出して動作するはずです。
このアドオンでサポートされている機能がどのように機能するかの詳細については、ドキュメントを参照してください。
あなたが期待するように何かが機能しない場合は、問題を自由に開いてください。
このアドオンは、必要に応じて、添加物構成のオプションオブジェクトを渡すことができます。
例えば：
// .storybook/main.js
const path = require ( 'path' )
module . exports = {
// other config ommited for brevity
addons : [
// ...
{
name : 'storybook-addon-next' ,
options : {
nextConfigPath : path . resolve ( __dirname , '../next.config.js' )
}
}
// ...
]
}nextConfigPath ： next.config.jsへの絶対パス次の/画像は、ストーリーブックを操作することが難しいことで有名です。このアドオンを使用すると、next.jsのImageコンポーネントを構成なしで使用できます！
画像コンポーネントには、画像最適化などの機能があるため、next.js構成ファイルをフレームワークによって読み取りおよび処理する必要があるオプションで構成されており、解決するためにnext.jsによって公開されたパブリック関数はありません。これらの機能を安定にサポートすることはできません。
これがよりよくサポートされているのを見たい場合は、next.jsの側での議論や私たちの側での議論に気軽に貢献してください
ローカル画像はこのアドオンでうまく機能します！この機能はnext.js v11にのみ追加されたことに注意してください。
import Image from 'next/image'
import profilePic from '../public/me.png'
function Home ( ) {
return (
< >
< h1 > My Homepage </ h1 >
< Image
src = { profilePic }
alt = "Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="../public/me.png" set to equal the image itself (for this addon)
// placeholder="blur" // Optional blur-up while loading
/>
< p > Welcome to my homepage! </ p >
</ >
)
} リモート画像も正常に機能します！
import Image from 'next/image'
export default function Home ( ) {
return (
< >
< h1 > My Homepage </ h1 >
< Image
src = "/me.png"
alt = "Picture of the author"
width = { 500 }
height = { 500 }
/>
< p > Welcome to my homepage! </ p >
</ >
)
} すべてのnext.js Imageは、自動的に最適化されていません。
PlaceHolder = "Blur"を使用する場合、使用されるBlurdataurlは画像のSRCです（したがって、プレースホルダーを効果的に無効にします）。
next.js Imageがどのようにストーリーブックの処理されているかについての詳細については、この問題を参照してください。
この形式は、このアドオンによってまだサポートされていません。これがあなたが見たいものである場合、問題を自由に開きます。
このソリューションは、Storybook-Addon-Next-Routerに大きく基づいているため、このアドオンが機能する可能性のある優れたソリューションを提供してくれたlifeiscontentに感謝します。
next.jsのルーターは自動的にスタブされているため、ルーターが対話すると、アクションアドオンがある場合、すべてのインタラクションが[ストーリーブックアクション]タブに自動的にログに記録されます。
ストーリーごとのオーバーライドは、ストーリーパラメーターにnextRouterプロパティを追加することで実行できます。アドオンは、ここにルーターに入れたものを浅くマージします。
import SomeComponentThatUsesTheRouter from "./SomeComponentThatUsesTheRouter" ;
export default {
title : "My Story" ,
} ;
// if you have the actions addon
// you can click the links and see the route change events there
export const Example = ( ) => < SomeComponentThatUsesTheRouter /> ;
Example . parameters : {
nextRouter : {
path : "/profile/[id]" ,
asPath : "/profile/ryanclementshax" ,
query : {
id : "ryanclementshax"
}
}
}参照については、この例を参照してください。
グローバルデフォルトはpreview.jsで設定でき、デフォルトのルーターと浅くマージされます。
export const parameters = {
nextRouter : {
path : '/some-default-path' ,
asPath : '/some-default-path' ,
query : { }
}
}参照については、この例を参照してください。
スタブルーターのデフォルト値は次のとおりです（Globalsの仕組みの詳細については、Globalsを参照してください）
const defaultRouter = {
locale : context ?. globals ?. locale ,
route : '/' ,
pathname : '/' ,
query : { } ,
asPath : '/' ,
push ( ... args : unknown [ ] ) {
action ( 'nextRouter.push' ) ( ... args )
return Promise . resolve ( true )
} ,
replace ( ... args : unknown [ ] ) {
action ( 'nextRouter.replace' ) ( ... args )
return Promise . resolve ( true )
} ,
reload ( ... args : unknown [ ] ) {
action ( 'nextRouter.reload' ) ( ... args )
} ,
back ( ... args : unknown [ ] ) {
action ( 'nextRouter.back' ) ( ... args )
} ,
prefetch ( ... args : unknown [ ] ) {
action ( 'nextRouter.prefetch' ) ( ... args )
return Promise . resolve ( )
} ,
beforePopState ( ... args : unknown [ ] ) {
action ( 'nextRouter.beforePopState' ) ( ... args )
} ,
events : {
on ( ... args : unknown [ ] ) {
action ( 'nextRouter.events.on' ) ( ... args )
} ,
off ( ... args : unknown [ ] ) {
action ( 'nextRouter.events.off' ) ( ... args )
} ,
emit ( ... args : unknown [ ] ) {
action ( 'nextRouter.events.emit' ) ( ... args )
}
} ,
isFallback : false
} 関数をオーバーライドすると、自動アクションタブの統合が失われ、自分で構築する必要があります。
export const parameters = {
nextRouter : {
push ( ) {
// we lose the default implementation that logs the action into the action tab
}
}
}これを自分で行うと、このように見えます（ @storybook/addon-actionsパッケージをインストールしてください）：
import { action } from '@storybook/addon-actions'
export const parameters = {
nextRouter : {
push ( ... args ) {
// custom logic can go here
// this logs to the actions tab
action ( 'nextRouter.push' ) ( ... args )
// return whatever you want here
return Promise . resolve ( true )
}
}
}グローバルSASS/SCSSスタイルシートも、追加の構成なしでサポートされています。 preview.jsにインポートするだけです
import '../styles/globals.scss'これにより、 next.config.jsファイルにカスタムSASS構成が自動的に含まれます。
現在、
.mjsではなく、next.js構成の.js拡張機能のみがサポートされています。詳細については、next.config.jsを参照してください。
const path = require ( 'path' )
module . exports = {
// any options here are included in sass compilation for your stories
sassOptions : {
includePaths : [ path . join ( __dirname , 'styles' ) ]
}
}Next.jsはCSSモジュールを箱から出してサポートするため、このアドオンもサポートします。
// this import works just fine in Storybook now
import styles from './Button.module.css'
// sass/scss is also supported
// import styles from './Button.module.scss'
// import styles from './Button.module.sass'
export function Button ( ) {
return (
< button type = "button" className = { styles . error } >
Destroy
</ button >
)
}next.js用のJSソリューションに組み込まれたCSSはスタイルを整えています。
// This works just fine in Storybook with this addon
function HelloWorld ( ) {
return (
< div >
Hello world
< p > scoped! </ p >
< style jsx > { `
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
` } </ style >
< style global jsx > { `
body {
background: black;
}
` } </ style >
</ div >
)
}
export default HelloWorld独自のBabel設定も使用できます。これは、Styled-JSXをカスタマイズする方法の例です。
// .babelrc or whatever config file you use
{
"presets" : [
[
" next/babel " ,
{
"styled-jsx" : {
"plugins" : [ " @styled-jsx/plugin-sass " ]
}
}
]
]
}Monorepoを使用する場合は、Babel Configをストーリーブックプロジェクトに追加する必要がある場合があります。以下のコンテンツを使用して、StorybookプロジェクトにBabel構成を追加するだけです。
{
"presets" : [ " next/babel " ]
}next.jsでは、postcss configをカスタマイズできます。したがって、このアドオンは、PostCSS構成を自動的に処理します。
これにより、Zero Config TailWindcssなどのクールなものが可能になります！参照については、with-tailwindcssの例を参照してください！そのnext.jsのtailwindcssの例のクローンは、ストーリーブックとこのアドオンで設定されています。
さようなら../ ！ルートディレクトリからの絶対インポートは、このアドオンでは正常に機能します。
// All good!
import Button from 'components/button'
// Also good!
import styles from 'styles/HomePage.module.css'
export default function HomePage ( ) {
return (
< >
< h1 className = { styles . title } > Hello World </ h1 >
< Button />
</ >
)
} // preview.js
// Also ok in preview.js!
import 'styles/globals.scss'
// ...next.jsを使用すると、実行時の構成を許可します。これにより、Handy getConfig関数をインポートして、 next.config.jsファイルで特定の構成を実行することができます。
このアドオンを使用したストーリーブックのコンテキストでは、next.jsのランタイム構成機能が正常に機能することを期待できます。
Storybookはサーバーをレンダリングしないため、コンポーネントはクライアント側に通常表示されるもののみを確認します（つまり、 serverRuntimeConfig表示されませんが、 publicRuntimeConfigが表示されます）。
たとえば、次のnext.js configを検討してください。
// next.config.js
module . exports = {
serverRuntimeConfig : {
mySecret : 'secret' ,
secondSecret : process . env . SECOND_SECRET // Pass through env variables
} ,
publicRuntimeConfig : {
staticFolder : '/static'
}
} getConfigへの呼び出しは、ストーリーブック内で電話をかけると、次のオブジェクトを返します。
{
"serverRuntimeConfig" : {},
"publicRuntimeConfig" : {
"staticFolder" : " /static "
}
}next.jsには、SASSサポートのように無料で無料でたくさんのものが付属していますが、next.jsにカスタムWebpack設定の変更を追加することもあります。このアドオンは、追加したいWebpackの変更のほとんどを処理します。 next.jsが箱から出して機能をサポートしている場合、このアドオンはその機能をストーリーブックの箱から出して作業します。 next.jsが箱から出して何かをサポートしていないが、構成を簡単にする場合、このアドオンはストーリーブックのために同じことを行います。このアドオンを追加した後、ストーリーブックで機能するnext.js機能を取得するためにWebpackを構成する必要があるものを見つけた場合、これはおそらくバグであり、問題を開いてください。
Storybookのドキュメントに従って、Storybook/main.jsで、ストーリーブックに必要なWebpackの変更を作成する必要があります。
注：すべてのWebパックの変更がnext.config.jsと.storybook/main.jsの間でコピー/貼り付け可能であるわけではありません。 StorybookのWebpack構成に適切に修正する方法と、Webpackの仕組みについての再構築を行うことをお勧めします。
コミュニティを支援するために、例を紹介してください。
以下は、このアドオンを使用してストーリーブックにSVGRサポートを追加する方法の例です。完全な例はここにあります。
// .storybook/main.js
module . exports = {
// other config omitted for brevity
webpackFinal : async config => {
// this modifies the existing image rule to exclude .svg files
// since we want to handle those files with @svgr/webpack
const imageRule = config . module . rules . find ( rule => rule . test . test ( '.svg' ) )
imageRule . exclude = / .svg$ /
// configure .svg files to be loaded with @svgr/webpack
config . module . rules . push ( {
test : / .svg$ / ,
use : [ '@svgr/webpack' ]
} )
return config
}
}ストーリーブックはほとんどのタイプスクリプト構成を処理しますが、このアドオンは、next.jsの絶対的なインポートとモジュールパスエイリアスのサポートに追加のサポートを追加します。要するに、それはあなたのtsconfig.jsonのベースールとパスを考慮に入れます。したがって、以下のようなtsconfig.json 、箱から出して動作します。
{
"compilerOptions" : {
"baseUrl" : " . " ,
"paths" : {
"@/components/*" : [ " components/* " ]
}
}
}現在、このプラグインがサポートするnext.jsの唯一のサポートされている構成形式は、config（ie next.config.js ）のcommonjsバージョンです。これは主に、ストーリーブックアドオンから.mjsファイルを要求する方法を見つけていないためです（これは、私が知っている限りCommonJSモジュールにバインドされています）。あなたが助けることができるなら、あなたがこの議論に貢献して、そのようなサポートが可能であれば.mjsバージョンのサポートを得ることができるなら、私はそれを望んでいます。
Yarn V2またはV3を使用している場合、StoryBookがstyle-loaderまたはcss-loaderを解決できない問題に遭遇する可能性があります。たとえば、次のようなエラーが発生する場合があります。
Module not found: Error: Can't resolve 'css-loader'
Module not found: Error: Can't resolve 'style-loader'
これは、これらの糸のバージョンがYarn V1.xとは異なるパッケージ解像度ルールを持っているためです。これが当てはまる場合は、パッケージを直接インストールしてください。
通常の開発で次の画像を使用するときに、それらを扱うのと同じ方法で、画像のインポートを扱っていることを確認してください。
storybook-addon-nextの前に、画像のインポートはRAWパスを画像にインポートしました（例'static/media/stories/assets/plugin.svg' ）。 storybook-addon-next Imageを使用する場合、インポートは「next.js way」という点で、画像をインポートするときにオブジェクトを取得することを意味します。例えば：
{
"src" : " static/media/stories/assets/plugin.svg " ,
"height" : 48 ,
"width" : 48 ,
"blurDataURL" : " static/media/stories/assets/plugin.svg "
}したがって、ストーリーブック内の何かが画像を適切に表示していない場合は、アセットパスではなくインポートからオブジェクトが返されることを確認してください。
next.jsが静的画像のインポートをどのように扱うかの詳細については、ローカル画像を参照してください。
現在、 next.config.mjsを使用して、このアドオンによってサポートされていません。詳細については、next.config.jsを参照してください。現在、代わりに.js拡張機能を使用する必要があります。この議論をお気軽にお手伝いして、この議論をサポートしてください。
Yarn V2またはV3を使用している場合は、これを取得できます。詳細については、Yarn V2およびV3ユーザーのメモを参照してください。
私は議論を受け入れています。お気軽に問題を開いてください。
このドキュメントはあなたにとって不十分でしたか？
混乱していましたか？
それは...あえて私が言う...不正確ですか？
上記のいずれかがこの文書のあなたの気持ちを説明している場合。お気軽に問題を開いてください。
