Next.jsにStorybookを導入したい
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F21-00.png?alt=media&token=c06efb09-e012-42a6-8a83-af990089a1c8)
新規のNext.jsのプロジェクトでStorybookを導入したので、メモしました。
参考ドキュメントはこちらになります。
1、Webpack5で新しいストーリーブックを初期化する
まずは下記のコマンドでストーリーブックをinstallします。
npx sb init --builder webpack5
上のコマンドでは、 --builder webpack5
オプションを使用していますが、
Next.jsv11以降はWebpack5を使用するので。StorybookでWebpack5を使用して、統合とパフォーマンスを向上させています。
2, Next.jsの全ページのストーリーを作成する
Next.jsとStorybookには、非常に互換性のあるコンポーネントモデルがあり、Next.jsはページのコンポーネントを使用し、Storybookはドキュメントとテストのコンポーネントを使用します。
これにより、StorybookはNext.jsの優れたコンポーネント駆動型開発環境になります。公式ドキュメントに沿ってNext.jsホームページのストーリーを作成しました。
// /stories/pages/home.stories.tsx
import Home from '../../pages/index';
export default {
title: 'Pages/Home',
component: Home,
};
3、共有のグローバルスタイルシートをpreview.jsにインポート
次に、Next.jsのグローバルスタイルをインポートします.storybook/preview.js
の1行目にインポートしました。
// .storybook/preview.jsimport "../styles/globals.css";
// .storybook/preview.js
import "../styles/globals.css";
お試しでnpm run storybook
で動作確認をします。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F21-01.png?alt=media&token=e6256a87-446e-4eb1-90df-4f0684aa470b)
エラーでした。
調べたところ、TypeScriptでwebpack5を使用する場合、storybook側がwebpack4を参照してしまうらしいです。
storybookのリポジトリでissueに上がっていますが、明確な解決方法はまだないようでした。
.storybook/main.jsに下記のオプションを追記することで回避できるようなので試してみました。
// .storybook/main.js
module.exports = {
"typescript" : { reactDocgen: false }, // 追記しました
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions"
],
"framework": "@storybook/react",
"core": {
"builder": "webpack5"
}
}
再度、npm run storybookで動作確認をします。無事に動作しました!
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F21-00.png?alt=media&token=90fadb80-5690-4a10-8f56-2100a7cd269e)
4,ストーリー内のNext.js画像の最適化を解除します
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F21-02.png?alt=media&token=18cb6c99-af4d-46d3-8e27-8c155878c3b4)
しかしながら、画像が404で表示できていませんでした。公式によるとpackage.jsonを更新して、画像のディレクトリを指定することで回避できます。
// package.json
"scripts": {
"storybook": "start-storybook -p 6006 -s ./public", // 変更しました
"build-storybook": "build-storybook -s public" // 変更しました
}
再度、npm run storybook
で動作確認をします。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F21-03.png?alt=media&token=c53fd015-9077-4918-aa70-8ae4644406f7)
無事に画像も表示されました。
以上になります。
これから開発頑張ります。
お読みいただきありがとうございました。