Closed16

Next + TypeScript + Storybook + Storyshotsを動かすまで

example使ってcreate-next-appしようかと思ったけど最新コミットが3ヶ月前か

https://github.com/vercel/next.js/tree/canary/examples/with-typescript

作業手順

nextでプロジェクト作成しsrcディレクトリに移す

  1. npx create-next-app {project name}
  2. mkdir src && mv pages src && mv styles src

typescript対応

  1. yarn add --dev typescript @types/react @types/react-dom @types/node
  2. jsをtsxに拡張子変更(tsxの書き方に変える)
  3. yarn build でtsconfigが生成される

import styles from "styles/Home.module.css";がエラーを吐いてるが次の作業すると消える

eslint入れる
examples参考にする

https://github.com/vercel/next.js/tree/master/examples/with-typescript-eslint-jest
  1. yarn add --dev @testing-library/react @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-jest eslint eslint-config-prettier eslint-plugin-react husky identity-obj-proxy jest jest-watch-typeahead lint-staged prettier eslint-plugin-import eslint-plugin-simple-import-sort
  2. with-typescript-eslint-jestと同じコンフィグを追加する .babelrc .eslintignore .eslintignore .eslintrc.json .prettierignore .prettierrc jest.config.js
  3. testディレクトリとtestファイルの追加
  4. package.jsonの編集
  5. yarn husky install
  6. .husky配下に実行したい設定を記載する(pre-commitpre-pushなど)
  7. eslint-config-prettierの指定方法が変わったので修正する
package.json
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc --pretty --noEmit",
    "format": "prettier --write .",
    "lint": "eslint src --ext ts --ext tsx",
    "test": "jest",
    "test-all": "yarn lint && yarn type-check && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn run type-check"
    }
  },
  "lint-staged": {
    "*.@(ts|tsx)": [
      "yarn lint",
      "yarn format"
    ]
  },

storybook入れる

  1. yarn add -D @storybook/react
  2. .storybookにmain.jsとpreview.js追加
  3. yarn add -D sass css-loader sass-loader style-loader
  4. scssファイルを読み込むためにmain.jsにwebpackの設定追加
  5. package.jsonにstorybookのコマンド追加

参考にした記事

https://qiita.com/keitakn/items/982d7e6cdfc294c82a95
https://panda-program.com/posts/nextjs-storybook-typescript-errors/#「module-parse-failed-unexpected-character--10」でscssが読み込めない
https://github.com/vercel/next.js/discussions/14333#discussioncomment-32130

storyshots入れる

  1. yarn add -D @storybook/addon-storyshots
  2. Storyshots.test.ts作る
  3. jest.config.jsでcssやfileやらをmockする設定する
  4. transformにjsも加える'^.+\\.(js|ts|tsx)$': 'babel-jest',
  5. storyshots用のjestのconfig加える
  6. pacakge.jsonにstoryshots用のコマンドを追加する
  7. jest.config.jsとjest.storyshots.config.jsの設定をいじって、storyshotsと普通のテストでコマンド分ける

コンポーネント数が多くなるとstorycap + reg-suitのが良さそうらしい

  1. yarn add storycap --dev
  2. pacakge.jsonにscreenshotコマンド追加
  3. yarn add reg-suit --dev
  4. yarn add -D reg-keygen-git-hash-plugin reg-notify-github-plugin reg-publish-s3-plugin reg-notify-slack-plugin
  5. package-lock.json削除する
  6. slackのwebhookの用意
  7. reg-suitのgithub appいれる
  8. yarn reg-suit initで初期設定(clientIDやらwebhookやらs3についての設定)
  9. ローカルで動かす場合はs3のアクセス権限を持つaws profileを設定しておく
  10. yarn reg-suit runで実行
  11. package.jsonにregressionコマンドの追加

TODO: circleCIの設定

yarnのバージョン指定
yarn policies set-version

https://dev.akito.io/posts/js-nodejs-yarn-version/

package.jsonにenginesの追加

package.json
  "engines": {
    "npm": "npmではなくyarnを使ってください。yarn.lockを大事にしてください",
    "yarn": "1.22.10"
  }

tailwindcssを入れる

https://tailwindcss.com/docs/guides/nextjs#install-tailwind-via-npm
  1. yarn add -D tailwindcss postcss autoprefixer postcss-nested
  2. yarn tailwindcss init -p
postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-nested': {},
  },
}
tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/components/**/*.tsx', './src/pages/**/*.tsx'],
    options: {
      // https://purgecss.com/safelisting.html#patterns
      safelist: {
        standard: [/^bg-/, /^text-/],
      },
    },
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

tailwindcss込みでstorybookを入れる

  • yarn add -D @storybook/react @storybook/addon-links @storybook/addon-essentials
  • .storybook配下に必要な設定を入れる

該当の設定まわり

https://github.com/yota-hada/inside-podcast/tree/main/.storybook

tailwindcss + storybookの postcss8の暫定対応

https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085

storybookのpostcssがおそらくv7を使っていてtailwindcssの2系を使うときにpostcssのv8使ってよって怒られるので
@storybook/addon-postcss + storybookのバージョンを6.2.0-alpha.23にすることでtailwindcssを使用することができる

https://storybook.js.org/addons/@storybook/addon-postcss
このスクラップは2021/01/05にクローズされました
ログインするとコメントできます