フルスタックWebフレームワークNext.jsプロジェクトセットアップ: オプションと設定

はじめに

Next.jsプロジェクトをセットアップする際には、いくつかの重要な選択肢が提供されます。これらの選択肢はプロジェクトの構造と使用する技術スタックに影響を与えるため、理解しておくことが重要です。本セクションでは、それぞれの選択肢について詳細に説明します。

「What is your project named?」の後に実際に作成するプロジェクト名を入力します

プロジェクトの名前は、プロジェクトのディレクトリ名として使用されます。この名前は後で変更することができますが、最初に適切な名前を選択することが重要です。

What is your project named? my-app

ソースコードでTypescriptを利用するかどうかのオプションです。

TypeScriptはJavaScriptのスーパーセットであり、型安全を提供します。Next.jsはTypeScriptをサポートしており、プロジェクト作成時に使用するかどうかを選択できます。

yesと答えるとTypescriptにnoだとjavascriptになります

Would you like to use TypeScript? No / Yes

ESLintを利用して性的解析を行うかどうかのオプションです。

ESLintは、JavaScriptコードの品質とコンシステンシーを保つためのリントツールです。Next.jsはESLintの設定をサポートしており、プロジェクト作成時に使用するかどうかを選択できます。

yesと答えるとESLintを利用し、noだと適応されないようになります

Would you like to use ESLint? No / Yes

UIのスタイルにTailwind CSSを利用するかのオプションです

Tailwind CSSはユーティリティファーストなCSSフレームワークであり、Next.jsプロジェクトで使用することができます。この選択肢により、Tailwind CSSのセットアップを簡単に行うことができます。

yesと答えるとTailwind CSSをデフォルトで利用できるようになります。

Would you like to use Tailwind CSS? No / Yes

ソースコードの管理ディレクトリにsrcディレクトリを利用するかどうかのオプションです

`src/`ディレクトリはプロジェクトの主要なソースコードを格納するためのディレクトリです。このディレクトリを使用することで、プロジェクトの構造を整理しやすくなります。

yesと答えると`プロジェクトルート/src/アプリケーション`のソースコードのようなディレクトリ構成になります

Would you like to use `src/` directory? No / Yes

App Routerは、Next.jsアプリケーションのルーティングを管理するためのツールです。Next.jsのバージョン13からの新機能になっています（参照：Next.js13でのページとAPIのファイル名とディレクトリの命名）

この選択肢により、ルーティングの設定を簡単に行うことができます。
yesと答えるとAPPRouterを利用したルーティングになります

Would you like to use App Router? (recommended) No / Yes

インポートする際にimport @/*で行えるようにするかどうかのオプションです

インポートエイリアスをカスタマイズすることで、プロジェクト内の異なるパスに簡単にアクセスできるようになります。
yesと答えるとimport @/*でインポートできるようになり、その次の質問でインポートエイリアスを指定することができます

Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

これらの選択肢は、Next.jsプロジェクトのセットアップとカスタマイズに大きく影響します。各選択肢を理解し、プロジェクトの要件に基づいて適切な選択をすることが重要です。