Next.jsのテンプレートリポジトリを作る

フロントエンド開発には便利なツール群がたくさんある一方で、

そのツール群をプロジェクトを始めるたびに毎回一つ一つ入れて設定して…

というのは、正直骨が折れます。

ということで、2021/01/20 時点でフロントエンド開発をする上で入れておきたいツール群をあらかじめ入れて設定を済ませたテンプレートレポジトリを作りました 🎉

GitHub - akhrszk/nextjs-template-with-typescript-tailwindcss-storybook

含まれているもの一覧

• TypeScript
• Tailwind CSS
• Storybook
• ESLint
• Prettier
• husky
• lint-staged
• Jest
• React Testing Libraries
• GitHub Actions

使い方

とりあえず Next.js 立ち上げ

yarn dev

👉 http://localhost:3000

Storybook

storybook の立ち上げ

yarn storybook

👉 http://localhost:6006

Lint

Lint ツールは ESLint と Prettier を入れてます。

# Lintチェック
yarn lint

# コード整形
yarn fix

husky と lint-staged も設定してあるので、コミット時に自動でコードを整形してくれます ✨

Test

テストツールは Jest と React Testing Library を入れてます。

React のテストについては以下を参照

• React - Testing Overview
• Next.js - Testing
• GitHub - vercel/next.js/examples/with-jest-babel
• Testing Library - React Testing Library

GitHub Actions

GitHub Actions の設定も入れました。

Push すると Lint と Test が回ります 👍

name: Lint And Test
on:
  push:
    branches:
      - master
      - "feature/**"
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 16
        uses: actions/setup-node@v2
        with:
          node-version: "16"
      - name: Install packages
        run: yarn install
      - name: Run linters
        run: yarn lint
      - name: Run test
        run: yarn test
      - name: Build
        run: yarn build

以上、Next.js のテンプレートの紹介でした。