Next.js + TailwindCSS + Storybookプロジェクトセットアップ

3 min read読了の目安(約2900字

はじめに

Next.js + TailwindCSS + Storybook を組み合わせたプロジェクトをセットアップする際、有志によって作成された記事ではPostCSS 7やNext.jsのexampleを使用する方法などが紹介されていますが、2021年4月現在では公式ページに記載されている情報だけでかなり簡単にセットアップできるので紹介します。

  • Next.js (Webpack 5)
  • TypeScript
  • TailwindCSS (JIT)
  • Storybook (PostCSS 8 & Webpack 5)

上記の設定を適用したプロジェクトを、公式で紹介されているページへのリンクを記載しながらセットアップします。

Next.js (Webpack 5)

create-next-appを使ってプロジェクトを作成します。
https://nextjs.org/docs/api-reference/create-next-app

$ yarn create next-app

srcディレクトリを使用する場合はこの時点で設定しておきましょう。
https://nextjs.org/docs/advanced-features/src-directory

次にNext.jsでWebpack 5を有効にします。
https://nextjs.org/docs/messages/webpack5

next.config.js
module.exports = {
  future: {
    webpack5: true,
  },
};

TypeScript

tsconfig.jsonを作成しNext.jsにTypeScriptの設定を任せます。
https://nextjs.org/docs/basic-features/typescript

$ touch tsconfig.json
$ yarn add -D typescript @types/react
$ yarn dev

_app.tsxindex.tsxに変更しておく場合はこの時点でしておきましょう。
[https://nextjs.org/docs/basic-features/typescript#custom-app]
(https://nextjs.org/docs/basic-features/typescript#custom-app)

TailwindCSS (JIT)

公式を参考に、Next.jsに導入していきます。
https://tailwindcss.com/docs/guides/nextjs

$ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init -p

PurgeCSSの設定とJITモードの有効化をします。ここではsrcディレクトリを指定しています。
https://tailwindcss.com/docs/just-in-time-mode

tailwind.config.js
module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,ts,jsx,tsx}"],
  // ...
};

_app.tsxからTailwindCSSを読み込みます。

_app.tsx
import "tailwindcss/tailwind.css";

Storybook (PostCSS 8 & Webpack 5)

StorybookをWebpack 5で導入し、PostCSS 8のための公式アドオンを追加します。
https://storybook.js.org/blog/storybook-for-webpack-5
https://storybook.js.org/blog/storybook-6-2

$ npx sb init --builder webpack5
$ yarn add -D @storybook/addon-postcss

PostCSS 8を使用するように設定します。
https://storybook.js.org/addons/@storybook/addon-postcss

.storybook/main.js
module.exports = {
  addons: [
    // ...
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  // ...
};

ちゃんとセットアップできているか確認したら終了です!

$ yarn storybook

おわりに

  • Next.jsのwebpack 5
  • TailwindCSSのJITモード
  • StorybookのWebpack 5

こういったものがこれからデフォルトで組み込まれていくと思われるので、この記事をみなさんが読んでいる頃にはもしかしたらより簡単にセットアップできるようになっているかもしれません。

結論:公式サイトがベスト!