Next.jsに導入したStorybookで_app.tsxに定義してあるやつが呼ばれなくて困ったとき
備忘録です。
Next.jsでは pages/_app.tsx にグローバルのスタイルを記述していたり、いろいろなProviderを配置していたりしますよね。
StorybookのストーリーファイルにNext.jsで使っているコンポーネントをそのまま持っていこうとすると、グローバルのスタイルが当たらず違う見た目になったり、Providerのエラーが出たりして困ります。
Storybookに用意されている グローバルデコレータ という機能を使って解決できました。
.storybook/preview.js
import App from '../pages/_app'
export const decorators = [(Story) => <App Component={Story}></App>]
Next.jsにStorybookを導入する方法については 「結局 Next (TypeScript) にStorybookを入れるには何が必要なの？」 を参照してください！
Author And Source
この問題について(Next.jsに導入したStorybookで_app.tsxに定義してあるやつが呼ばれなくて困ったとき), 我々は、より多くの情報をここで見つけました https://zenn.dev/tomon9086/articles/9bfbae4513b59e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol