Next.js のインストール時に英文の対話質問文に答えながらプロジェクトの設定を指定していきます。はじめて Next.js をインストールする際に「この英文はどう意味なのか」という疑問を当記事で解決できれば幸いです。
みなさんご存知のとおり、Next.js をインストールするには以下のコマンドを入力しエンターを押します。
npx create-next-app@latest
すると、インストールする Next.js プロジェクトの設定を指定するための対話文が表示されます。早速、対話の質問文を１項目ごとに見ていきましょう。
What is your project named?
プロジェクトの名前を指定する質問文です。例えば、my-app と入力すると、その名前のディレクトリが作成されます。
Would you like to use TypeScript? ( No / Yes )
TypeScript を使用するかどうかを選択します。Yes を選ぶと、プロジェクトに TypeScript が設定されます。No を選ぶと、JavaScript が使用されます。
TypeScript を使用することで、静的解析によるバグの予防にも役立ちますので基本的には Yes を選択したほうが良いでしょう。
Would you like to use ESLint? ( No / Yes )
コード品質のチェックとスタイルの強制のために ESLint を使用するかどうかを選択します。Yes を選ぶと、ESLint がプロジェクトに設定されます。
ESLint を使用すると、コードの品質を保持しバグの予防にも役立つのですが、Next.js を開発する上で少々使いずらいところも正直あります … 。
Would you like to use Tailwind CSS? ( No / Yes )
Tailwind CSS を使用するかどうかを選択します。Yes を選ぶとプロジェクトに Tailwind CSS が設定されます。
Would you like to use src/ directory? ( No / Yes )
プロジェクトのソースコードを src/ ディレクトリ内に配置するかどうかを選択します。Yes を選ぶと、src/ ディレクトリが作成され、その中にソースコードが置かれます。
どちからというと、src/ ディレクトリを作成せずにプロジェクトルート直下に app ディレクトリを配置したほうがスッキリした感じなります。
と言っても、ディレクトリの配置については人それぞれの好みになりますので、お好きなほうを選んでください。
Would you like to use App Router? (recommended) ( No / Yes )
App Router を使用するかどうかを選択します。App Router は Next.js の新しく実装されたルーティングシステムの一部で、Yes を選択することで利用することができます。以前からある Pages Router を使用したい際は No を選択してください。
Would you like to customize the default import alias (@/*)? ( No / Yes )
デフォルトのインポートエイリアスをカスタマイズするかどうかを選択します。Yes を選ぶと、デフォルトのエイリアスを設定できます。例えば、@/ を使ってプロジェクトのルートからのインポートを簡略化できます。
基本的にデフォルトのエイリアス @/ で問題ありませんので、デフォルトの No を選ぶことをお勧めします。
以上、Next.js インストール時の対話部質問の解説でした！これらの設定は、プロジェクトの初期設定を簡単に行うためのものです。選択肢を適宜選んでプロジェクトを作成することで、自分の開発環境に適した Next.js プロジェクトを素早く立ち上げるてみましょう！
それでは、良い開発ライフを！