create-next-appで訊かれていること

前提

Next.js v14.2.13 での話です。
後述の回答の指針は、あくまで執筆者個人の一意見です。参考までにどうぞ。

はじめに

フロントエンド開発ではNext.jsが使われてるらしいぞ。ということで、create-next-appを叩いたら

$ npx create-next-app@latest
✔ What is your project named? › my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*

えーと・・・？

訊かれていること

✔ What is your project named?

あなたのプロジェクト名は何ですか？

回答の指針

お好きなプロジェクト名をつけましょう。
学習目的でこだわりがなければ、デフォルトのmy-appでよいかと思います。

✔ Would you like to use TypeScript?

TypeScriptを使いたいですか？

TypeScriptとは

JavaScriptに型の機能を導入したプログラミング言語。
チーム開発するならJavaScriptではなく、TypeScriptが主流みたい。
JavaScriptと比べると日本語の情報が少ない（＝学習がやや大変）。

回答の指針

以下がよいかと思います。

JavaScriptわかる	TypeScriptも勉強したい	回答
Yes	Yes	⇒Yes
Yes	No	⇒No
No	-	⇒No

✔ Would you like to use ESLint?

ESLintを使いたいですか？

ESLintとは

作成したコードを機械的にレビューしてくれるツール（静的解析ツール）。
また、作成したコードを整形（フォーマット）してくれる機能も有する。

回答の指針

使用するのが大半っぽいし、あって困ることないので。

回答
⇒Yes

✔ Would you like to use Tailwind CSS?

Tailwind CSSを使いたいですか？

Tailwind CSSとは

最近流行ってるCSSフレームワーク。
HTMLタグのclass属性に定義されたの値を記入してスタイル設定を行える。
学習コストはやや高めの印象。設定ファイルも増える。

回答の指針

以下がよいかと思います。

CSSわかる	Tailwind CSSも勉強したい	回答
Yes	Yes	⇒Yes
Yes	No	⇒No
No	-	⇒No

✔ Would you like to use src/ directory?

src/ディレクトリを使いたいですか？

src/ディレクトリとは

Next.jsプロジェクト直下に配置するディレクトリ。使っても使わなくてもいい。
ある程度の規模のプロジェクトになるとソースコードのファイルが大量にできるので、専用の置き場としてsrc/ディレクトリを用意するのが慣例。

src/ディレクトリなし

my-next-app
├── node_modules # 外部パッケージ置き場
├── public       # 静的ファイル置き場
└── app  # jsx/tsxファイル置き場(この配下がURLと対応する＝ルーティングされる)

src/ディレクトリあり

my-next-app
├── node_modules # 外部パッケージ置き場
├── public       # 静的ファイル置き場
└── src
    └── app  # jsx/tsxファイル置き場(この配下がURLと対応する＝ルーティングされる)

回答の指針

以下がよいかと思います。

WEBアプリを作るぞ	回答
Yes	⇒Yes
No(Hello Worldぐらいしかしないよ)	⇒No

✔ Would you like to use App Router? (recommended)

App Routerを使いたいですか？（推奨）

App Routerとは

2023/05/05に安定版としてリリースされた、Next.jsの新しいルーティング機能。
今まではPages Routerというルーティング機能だったんだけど、新しいのができた。
recommendedとあるように、Next.jsは今後App Routerを推していくみたいです。

回答の指針

本記事の執筆時点(2023/05/25)は、かなり情報が少ないです。
初学者なら、まずはPages Routerを理解したほうがよいと思います。
本記事の更新時点(2024/09/22)では、ある程度情報が出てきています。
公式の推奨通り、App Routerの学習を進めてもよいと思います。

回答
⇒Yes

✔ Would you like to customize the default import alias (@/*)?

デフォルトのインポートエイリアス(@/*)をカスタマイズしたいですか？

インポートエイリアスとは

JavaScript/TypeScriptのモジュール（＝ファイル）から、他のモジュールを読み込むことをインポートといいます。

index.jsx

// 他のモジュール SamplePageMain.jsx を読み込む
import { SamplePageMain } from "../../../commponents/mains/SamplePageMain"

このインポートの読み込み元モジュールは相対パスで記載するのが基本なのですが、プロジェクトのディレクトリ階層が深くなると、参照が分かり辛くなります。例で言うと../../../の部分が分かり辛いですよね。

これを解消するのがインポートエイリアスという機能です。デフォルトでは@/がソースコードのルートディレクトリを示します。
先の例をインポートエイリアスを使って書き換えると以下になります。

index.jsx

// 他のモジュール SamplePageMain.jsx を読み込む
import { SamplePageMain } from "@/commponents/mains/SamplePageMain"

回答の指針

質問は、インポートエイリアスのデフォルト値@/*を変更したいか？ということ。
初学者にはどうでもいいところなので、もちろん。

回答
⇒No

✔ What import alias would you like configured?

設定したいインポートエイリアスは何ですか？

直前の質問をYesと答えちゃいましたね

初学者は、インポートエイリアス変えたい意図はないでしょう。
おすすめされるものは何でもYesと答えたい人なんですね。

回答の指針

何も考えずEnterを押せば、結局デフォルトの値が設定されるようになってます。

感想

create-next-appって初学者向けの勉強用ツールではなくて、簡単にNext.jsプロジェクトのひな型を用意できるツールなんですよね。
なので、勉強のためにNext.jsを触ってみたいなっていう人がとりあえずで実行すると、最初に躓くポイントじゃないかな。と思いました。

少なくとも私は冒頭の通り、 えーと・・・？ となった。

補足

学習時になんとなく残したメモ記事だったのですが、意外と閲覧されており。
執筆時点から状況が変わってきつつありましたので、内容を更新＆少し修正しました。