アイコンライブラリの追加

今回、サイトで利用するアイコンは Lucide React を利用していきます。

• Lucide React

以下のコマンドを実行してください。

他にも様々なライブラリアがあります。好みにあわせて利用してください。

Storybook を利用できるようにする

コンポーネントの管理で便利な Storybook をこのプロジェクトでも利用できるようにして行きます。なお、手順は以下のページを参考にして進めて行きます。

Next.js + Storybook

この文書では、Next.js のプロジェクトに Storybook を追加して利用する方法を紹介します。Storybook を利用すると、事前に用意したデータを利用してコンポーネントを表示することができるため、プログラムの開発と並行してコンポーネントの UI を作成していくことができます。

以前の記事を参考にする場合ですが、当時は postcss.config.mjs の記述でエラーが出ていましたが、Next.js のバージョンがあがって改善しています（以前の記事にも同じ注意書きを入れておきました）。

Storybook の追加

Next.js のプロジェクトのルートで、以下のコマンドを実行します。

インストールが完了すると、storybook が自動的に起動します。次回以降は以下のコマンドで起動します。

これで起動するようになりました。

Tailwind CSS のファイルの変更

Next.js で利用している Tailwind CSS のファイルは apps/nextjs/app/globals.css に展開されています。これを、apps/nextjs/styles/globals.css に移動します。

Next.js でこのファイルを参照しているコードを変更します。

また、Storybook の preview.ts のファイルも上記の同じファイルを参照するようにします。

コンポーネントと CSS を整理する

続いて Storybook がサンプルとして提供しているファイルを削除して人まずサンプルのコンポーネントを配置します。

まず、Storybook のサンプルとして入っているコンポーネントのフォルダ名を apps/nextjs/stories から apps/nextjs/components に変更します。また、stories.tsも一括で管理するために、storybook のフォルダを作成します。

コンポーネントの参照場所が変わるため、以下のファイルで参照しているパスを変更してください。

続いてサンプルのファイルを配置して行きます。コンポーネントのファイルとして以下のコードを利用してください。

続いて、stories のファイルを作成します。

最後にスタイルシートを調整します。スタイルシートのファイルを１つ追加します。

上記のスタイルのファイルを globals.css に反映させます。他のコードを削除して、以下のようにします。

今回、サンプルの画像を public に追加します。画像ファイルに関しては、apps/nextjs/storybook/Hero.stories.ts にてパスを記載しているため、任意のファイルをアップした場合は画像のパスを変更してください。

動作確認

上記の変更がどのように適用されるか確認をして行きます。

Storybook の確認

まず Storybook での動作確認です。以下のコマンドを実行してください。

以下のように Hero コンポーネントがサンプルとして表示できています。

Next.js での確認

続いて Next.js で動作確認をします。まだ今回のコンポーネントを追加していないため、トップページに Hero を追加します。

まずコンポーネントを読み込みます。

続いてこのコンポーネントを利用するために、同じファイルに Hero のあたりを追加してください。

これで準備が完了です。 Next.js のコンポーネントを起動します。

以下のように、コンポーネントを利用することができました。

まとめ

これからブログを作っていくにあたって、コンポーネントの管理ができると便利なので、取り急ぎ Storybook を追加しました。またサイトで利用するアイコンのライブラリも最初に追加しており、さっそく Hero のところでアイコンとして利用しています。

ここまでのコードは、以下のブランチで公開しています。

• https://github.com/haramizu/haramizu.jp/tree/nextjs-step-2