Tech Blog - Akihiro Suzuki

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

January 19, 2022

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

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

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

ということで、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 のテストについては以下を参照

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 のテンプレートの紹介でした。


profile

鈴木 章弘 (Suzuki Akihiro)
バックエンドエンジニア(TypeScript & マイクロサービス)
profile