Next.js, TypeScript, TailwindCSS, Jest, huskyのセットアップをサクッと

テンプレートリポジトリ

https://github.com/tingtt/nextjs-template

テンプレートリポジトリを使うか、この記事のスクリプトを実行してセットアップできます。

テンプレートを使う場合はGitHubで Use this template からリポジトリを作成してgit cloneとyarnするだけで使えます。

この記事のスクリプトを使用する場合はjqコマンドを使用するので入れていない方はインストールしてください。

brew install jq

プロジェクト作成

myappは各々のプロジェクト名に書き換えてください。

# プロジェクト作成
yarn create next-app --typescript myapp
# プロジェクトのディレクトリへ移動
cd myapp

もろもろのインストール

Prettier

https://prettier.io/

コードフォーマットツール

# インストール
yarn add -D prettier

# .prettierrc.js の作成
cat <<EOF > .prettierrc.js
module.exports = {
  arrowParens: 'always',
  singleQuote: true,
  jsxSingleQuote: true,
  tabWidth: 2,
  semi: false,
};
EOF

# .prettierignore の作成
cat <<EOF > .prettierignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
.next
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel

# changelog
CHANGELOG.md
EOF

---

husky, lint-staged, commitlint

https://typicode.github.io/husky/

git commitした際に自動でスクリプトを実行するツール

https://github.com/okonet/lint-staged

yarn lint-stagedでgit addされているファイルをlintするツール
yarn lint-stagedで実行される内容はpackage.jsonに記述する。

https://commitlint.js.org/

コミットメッセージをlintするツール
aaaみたいな雑すぎるコミットメッセージが許されない世界になる。

# インストール
yarn add -D \
  husky \
  @commitlint/{config-conventional,cli} \
  lint-staged

# package.json に追記
cat <<< $(
  cat package.json |
    jq '."lint-staged"."pages/**/*.{js,jsx,ts,tsx}"|=["eslint --max-warnings=0","prettier -w"]' |
    jq '."lint-staged"."styles/**/*.{css,scss}"|=["prettier -w"]'
) > package.json

# `husky`の設定
yarn husky install
# `lint-staged`を`husky`のhookに追加
yarn husky add .husky/pre-commit "yarn lint-staged"

# commitlint.config.js を作成
cat <<EOF > commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
};
EOF

# package.json に追記
cat <<< $(
  cat package.json |
    jq '.scripts.commitmsg|="commitlint -e $GIT_PARAMS"' |
    jq '.scripts.prepare|="husky install"'
) > package.json

# `commitlint`を`husky`のhookに追加
yarn husky add .husky/commit-msg "yarn commitmsg"

---

Jest

https://jestjs.io/

JavaScript（TypeScript）のテスティングフレームワーク

# インストール
yarn add -D \
    jest \
    @types/jest \
    ts-jest \
    @testing-library/jest-dom \
    @testing-library/react
yarn jest --init

# サンプルのテストを作成
mkdir -p __test__
cat <<EOF > __test__/hello.test.ts
it('hello', () => {
  expect('hello').toBe('hello')
})
EOF

# `jest`を`husky`のhookに追加
yarn husky add .husky/pre-commit "yarn test"

---

Tailwind CSS

https://tailwindcss.com/

styleをいい感じに書くやつ

# インストール
yarn add tailwindcss postcss autoprefixer
npx tailwindcss init -p

# tailwind.config.js を作成
cat <<EOF > tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
EOF

# styles/globals.css を変更
cat <<EOF > styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF

あとがき

よく使う組み合わせだと思うのでテンプレートリポジトリとスクリプトを作ってみました 💫
だれかの役に立つといいな〜

初めて使ったけどjqが超便利！