Next.js 14 ボイラープレートの作成：プロジェクトの効率を最大化

yuminn-k • Updated Jan 14, 2024

https://medium.com/dsc-vit-bhopal/getting-started-with-next-js-284817077fd9

　就職準備を始めて、プロジェクトを課題として受けることが頻繁に発生しました。その度にプロジェクトを新規作成し、毎回様々なオプションを設定するのが面倒でした(これは最も重要な問題でした！😂)。また、現在企画中のチームプロジェクトでもフロントエンドフレームワークとしてNext.jsを選択したので、一度設定しておけば、今後大きく役に立つと判断しました。この記事で私が作ったボイラープレートについて紹介し、どんな機能が設定されているか見てみましょう！

ボイラープレートとは何ですか？

　ボイラープレートは、特定のプラットフォームや技術に対する標準的なプロジェクト設定やコード構造を意味します。ボイラープレートを使用すると、開発者は毎回同じ設定を繰り返すことなく、効率的で一貫性のあるコードを作成することができます。

それで何を作りましたか？

　私はNext.js 14のためのボイラープレートを作りました。このボイラープレートはnpx create-next-appコマンドで作ったのでTypeScript、Next.js 14をサポートし、GTS、commitlint、husky、そしてJestを含んでいます。

設定された機能

GTS (Google TypeScript Style)： Googleが提供するTypeScriptスタイルガイドです。これにより、コードの一貫性を維持し、コードの品質を向上させることができます。GTSにはPrettierが含まれていて、これを使ってコードの書式を自動で整理して管理することができます。

Commitlint: コミットメッセージの形式を検査するツールです。これにより、一貫性のあるコミットメッセージを維持し、理解しやすいプロジェクト履歴を作成することができます。

Husky: HuskyはGitフックを簡単に管理してくれるツールで、コミットやプッシュする前にリントやテストを自動で実行することができます。

Jest: JestはJavaScriptテストフレームワークです。これにより、安定したアプリケーションを作るためのテストをサポートすることができます。

また、ESLintの設定では、GTSのルールに従うように設定し、必要なルールを追加設定しました。これにより、コードの品質を高め、ランタイムエラーを減らすことができます。

このボイラープレートを使いたかったら？

ボイラープレートを使うには、まずレポジトリをクローンして、yarnを使って依存関係をインストールする必要があります。その後、yarn devを実行して開発サーバーを起動します。

おわりに

このボイラープレートは開発環境を素早く設定し、コードの品質を高めるのに役立ちます。必要に応じて自由に修正して使用してください。良い開発環境は質の高いコードを作るための第一歩です。効率的な開発のための第一歩を踏み出しましょう!