LoginSignup
2

More than 1 year has passed since last update.

Next.jsを使ったプロジェクトをスタートダッシュできるGithub Templateを公開しました

Last updated at Posted at 2023-01-23

これはなに?

Next.js x TypeScriptを業務でも副業でもよく使用していて、最初のlint, prettierやらの環境構築が面倒なのでテンプレートを作成したという話です。

同じように最初の設定が面倒だという方の助けになれば嬉しいです。

作ったもの

Githubのテンプレート機能として公開しました。

どんなものか?

このテンプレートの中には保守性を高めるというテーマで自分がよく設定するものを入れています。

  • Renovate
  • Husky
  • Eslint, Prettier

それぞれの利用目的や設定についてを下に書いていきます。

Renovate

package.jsonを読み取ってインストールしているパッケージに更新がないかを確認し、更新があれば自動でPull Requestを作ってくれるツールです。

パッケージのアップデートはいちいち追えないうえ、自動でPull Requestまで作ってくれるので迷わず導入しています。

テンプレートを使用する際は自分でアクセストークンやアプリの登録をする必要があるので注意してください。

↓公式ドキュメント

Running Renovate - Renovate Docs

renovateに関する設定は/renovate.jsonに記載していて、具体的には以下を設定しています

名称 機能 テンプレートの設定
baseBranchs マージ先になるブランチ main
schedule アップデート確認&PR作成を行うタイミング every weekend
rangeStrategy 既存の範囲を更新する際のルール pin
prConcurrentLimit 一度のアップデート確認で作成するPRの数 5
packageRules 1PRに含めるパッケージのグルーピング Next.js, Linter, React, TypeScript

Husky

Huskyはコミットやプッシュの際にテストやlintを実行してくれるツールです。

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

個人開発の際は使わないのですが、複数人での開発やプロジェクトの場合はコードの品質が人に依存してしまうのでそれを防ぐために利用しています。

このテンプレートではコミット時にlintとprettierが走るようになっていて、lintでエラーや警告が1つでもある場合はコミットできないようになっています。

セットアップに関してはこちらの記事を参考にしてみてください。

https://qiita.com/mu-suke08/items/43a492fda5cd71a31506

Eslint, Prettier

Eslint

説明不要の静的解析ツールです。

構文エラーやコーディング規約を設定できるので利用しています。

このテンプレートでは以下の設定をしています。

■eslint-plugin-import

importおよびexportステートメントの構文をチェックしています。

このテンプレートではimportの順番を細かく設定しています。

順番はざっくりと以下のように設定しています。

ルール1

  1. オブジェクト(object)
  2. 型(type)
  3. インデックス(index)
  4. ビルドインモジュール(builtin)
  5. 外部モジュール(external)
  6. 内部モジュール(internal)

■eslint-config-prettier

ESLintの設定をPrettierのフォーマット設定に合わせるために使用しています。

■eslint-config-next

Next.jsに特化したに特化したESLintの設定を提供するパッケージです。

Prettier

これもまた説明不要のコードフォーマッターです。

複数人での開発の際に、チームの中でのコードのスタイルの統一性を高め、コードをより一貫性のある読みやすいものにするために利用しています。

最後に

「こんなものもデフォルトで入れてあると便利かも!」とかあると自分も学びになるのでコメント等していただけると嬉しいです!

ではまた!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2