Next.js と Typescript で React-StyleGuidist を使うための設定

概要

Next.jsとTypeScriptでReact-StyleGuidistを利用したかったので調査したときのメモとして残している。

Next.js プロジェクトの作成

create-next-app [prject-name]

cd [project-name]

mkdir src
mv pages src/
mkdir src/components
mkdir src/styleguide

必要なパッケージのインストール

# NextjsでTypeScriptを使うためのパッケージ
yarn add -D @types/node typescript @types/react

# React-StyleguidistをNextjs,TypeScriptと一緒に使うためのパッケージ
yarn add -D react-styleguidist babel-loader react-docgen-typescript

# Bootstrapを使いたかったので追加しているが、必須ではない。
yarn add bootstrap jquery popper.js

styleguide.config.jsの設定

const path = require("path");

module.exports = {
  components: "./src/components/**/*.tsx",
  propsParser: require("react-docgen-typescript").withCustomConfig(
    "./tsconfig.json"
  ).parse,
  styleguideComponents: {
    Wrapper: path.resolve(__dirname, "src/styleguide/Wrapper.tsx"),
  },
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
        {
          test: /\.css?$/,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  },
};

src/styleguide/Wrapper.tsxの設定

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

const Wrapper: React.FC = ({ children }) => {
  return <div>{children}</div>;
};

export default Wrapper;

babel.config.jsの設定

module.exports = {
  presets: ["next/babel"],
  plugins: [],
};

package.jsonの設定

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build"
  },

StyleGuistサーバの起動

あとはReactで利用する場合と同じように、
以下のコマンドで起動し、src/componentsにコンポーネントと対応するMDファイルを作成していく。

yarn styleguide