🐥

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

2023/05/25に公開

前提

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

はじめに

フロントエンド開発に入門じゃい。Reactじゃい。Next.jsじゃい。
と息巻いて、とりあえずcreate-next-appを叩いたら

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

えーと・・・?

訊かれていること

✔ Would you like to use TypeScript with this project?

このプロジェクトでTypeScriptを使いたいですか?

TypeScriptとは

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

回答の指針

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

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

✔ Would you like to use ESLint with this project?

このプロジェクトでESLintを使いたいですか?

ESLintとは

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

回答の指針

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

回答
⇒Yes

✔ Would you like to use Tailwind CSS with this project?

このプロジェクトで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 with this project?

このプロジェクトでsrc/ディレクトリを使いたいですか?

src/ディレクトリとは

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

src/ディレクトリなし
my-next-app
|-- node_modules # 外部パッケージ置き場
|-- pages  # jsx/tsxファイル置き場(この配下がURLと対応する=ルーティングされる)
|-- public # 静的ファイル置き場
`-- styles # cssファイル置き場
src/ディレクトリあり
my-next-app
|-- node_modules # 外部パッケージ置き場
|-- public     # 静的ファイル置き場
`-- src
    |-- pages  # jsx/tsxファイル置き場(この配下がURLと対応する=ルーティングされる)
    `-- styles # cssファイル置き場

回答の指針

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

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

✔ Use App Router (recommended)?

App Routerを使いたいですか?(推奨)

App Routerとは

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

回答の指針

本記事の執筆時点(2023/05/25)は、かなり情報が少ないです。
Next.js初学者なら、まずはPages Routerを理解したほうがよいと思います。

回答
⇒No

✔ 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を触ってみたいなっていう人がとりあえずで実行すると、最初に躓くポイントじゃないかな。と思いました。

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

Discussion