初めてのcreate-next-app

1. はじめに

Next.jsは、Reactベースのフレームワークで、サーバーサイドレンダリングやスタティックサイト生成などの機能を提供します。create-next-appはNext.jsの公式CLIツールで、新規React（Next.js）プロジェクトを自動的に構築します。

2. create-next-appのオプションパラメータ

create-next-appを使用する際、いくつかのオプションパラメータを指定できます。基本的な使用方法は以下の通りです。

npx create-next-app [プロジェクト名] [オプション]

主な引数とオプション：

• @latest: 最新バージョンを使用
• --ts, --typescript: TypeScriptをデフォルトで設定
• --tailwind: Tailwind CSSをデフォルトで設定
• --eslint: ESLintをデフォルトで設定
• --app: App Routerを使用
• --src-dir: ソースコードをsrc/ディレクトリに配置
• --import-alias: インポートエイリアスをカスタマイズ
• --use-npm: npmパッケージマネージャーを使用
• --use-pnpm: pnpmパッケージマネージャーを使用
• --use-yarn: Yarnパッケージマネージャーを使用
• --use-bun: Bunパッケージマネージャーを使用

例えば、TypeScriptを使用した最新のReact（Next.js）プロジェクトを作成するには、以下の様になります。

npx create-next-app@latest --ts

3. セットアップ時の質問オプション解説

npx create-next-appを実行したと想定して、各質問とそれぞれの選択肢について詳しく解説します。

質問1: ✔ What is your project named? … my-app

日本語訳：プロジェクト名は何ですか？

ここではプロジェクト名を指定します。

• 指定したプロジェクト名のプロジェクトのルートディレクトリ名になります
• package.jsonのnameフィールドに設定されます

💡ヒント:

• プロジェクト名は小文字のみを使用し、スペースの代わりにハイフンを使うことをお勧めします
• 既存のnpmパッケージ名と衝突しないようにするのが良いでしょう

質問2: ✔ Would you like to use TypeScript? … No / Yes

日本語訳：TypeScriptを使用しますか？

TypeScriptはJavaScriptを拡張して開発された新しいプログラミング言語で、特徴としては静的型付けが採用されています

選択肢	内容
Yes	- .tsおよび.tsxファイル拡張子が使用される - tsconfig.jsonファイルが作成される - 型定義パッケージがインストールされる
No	- 通常の.jsおよび.jsxファイル拡張子が使用される - 型チェックなしでJavaScriptで開発する

💡ヒント:

• 現代のWeb開発の主流はTypeScriptなので、迷っているならYesがオススメ
• 型安全性によるバグ防止やコード補完の恩恵を受けたい場合はYes
• JavaScriptを使いたい、初めての開発でサクッと試してみたい場合はNoも選択肢としてあり

質問3: ✔ Would you like to use ESLint? … No / Yes

日本語訳：ESLintを使用しますか？

ESLintは、コードの問題を検出するための静的解析ツール（プログラムの実行をせずにソースコードを解析して不具合を検出するツール）です。

選択肢	内容
Yes	- .eslintrc.jsonファイルが作成される - コードの品質チェックと問題検出が有効になる - package.jsonに関連パッケージと設定が追加される
No	- ESLint関連の設定が含まれない - コード品質チェックは自分で別途設定する必要がある

💡ヒント:

• チームでの開発やある程度規模の大きいプロジェクトでは、Yesを選ぶことをお勧めします
• 小さなテスト的なプロジェクトでは、Noでも問題ありません
• 基本的に、Yesを選ぶのが良いでしょう

質問4: ✔ Would you like to use Tailwind CSS? … No / Yes

日本語訳：Tailwind CSSを使用しますか？

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。

※CSSフレームワークには有名どころでいうとBootstrapなどが挙げられますが、これらのフレームワークでは事前に準備されているボタンやカードなどのコンポーネントを活用します。
一方で、Tailwind CSSでは事前に準備されたコンポーネントなどはなく、utility classを使って独自にデザインを行ってコンポーネントを構築します。

選択肢	内容
Yes	- tailwind.config.jsとpostcss.config.jsが作成される - 関連パッケージがインストールされる - グローバルCSSにTailwindの設定が追加される
No	- 従来のCSSのみが設定される - スタイリングは自分で実装する必要がある

💡ヒント:

• Tailwind CSSを使いたい場合はYes
• Tailwind CSS以外に使いたいフレームワークがある場合や、カスタムデザインを重視する場合はNo
• Tailwind CSSは現在のWeb開発では人気があるため、学習目的ならYesがオススメ

質問5: ✔ Would you like your code inside a src/ directory? … No / Yes

日本語訳：コードをsrc/ディレクトリ内に配置しますか？

ソースコードをsrc/ディレクトリ内に配置するかどうかを選びます。

選択肢	内容
Yes	- コードがsrc/ディレクトリ内に配置される - src/pages/またはsrc/app/のようにパスが変わる - コンポーネントやその他のファイルもsrc/内に配置
No	- ファイルがプロジェクトルートに直接配置される - pages/またはapp/ディレクトリがルートに作成される

💡ヒント:

• 大規模なプロジェクトや長期的な開発ではYesがオススメ
• 小規模なプロジェクトではNoでも問題ない
• ほとんどのWeb開発プロジェクトではsrc/ディレクトリを使用するため、Yesが標準的

質問6: ✔ Would you like to use App Router? (recommended) … No / Yes

日本語訳：App Routerを使用しますか？（推奨）

App RouterはNext.js 13で導入された新しいルーティングシステムです。

※App Routerとは、従来の「Pages Router」に代わり新たに追加されたNext.jsのルーティング機能であり、直感的で効率的なルーティングが可能となってます。

選択肢	内容
Yes	- app/ディレクトリが作成される - Reactサーバーコンポーネントが使用可能になる - 新しいファイルベースのルーティングシステムが有効になる
No	- 従来のpages/ディレクトリが作成される - クライアントサイドのPages Routerが使用される

💡ヒント:

• 新規プロジェクトであれば、Next.jsチームが推奨するYesが良い
• 既存のPages Router知識を活かしたい場合や、互換性を重視する場合はNo
• 現在のトレンドと将来性を考えるとYesがオススメ

質問7: ✔ Would you like to use Turbopack for next dev? … No / Yes

日本語訳：next devにTurbopackを使用しますか？

TurbopackはNext.jsの開発者が作成した新しいJavaScriptビルドツールです。

※Turbopackとは開発体験を向上させるためのツールで、コードの変更がブラウザに反映されるまでの時間を大幅に短縮することができるのが大きな特徴です。

選択肢	内容
Yes	- 開発サーバー起動時にnext dev --turboが使われる - 高速な開発サーバーとホットリロードが有効になる - 開発時のみWebpackの代わりに使用される
No	- 従来のWebpackが開発サーバーに使用される - 安定性が高いが、起動やリロードが比較的遅い

💡ヒント:

• 高速な開発環境を求める場合はYes
• 安定性を重視する場合はNo

質問8: ✔ Would you like to customize the import alias (@/* by default)? … No / Yes

日本語訳：インポートエイリアス（デフォルトは@/*）をカスタマイズしますか？

インポートエイリアスを使用すると、相対パスの代わりに短いエイリアスを使用できます。

エイリアスを使用するメリット:
エイリアスを使用することで、ファイルパスが短くなり、コードの可読性が向上します。以下にエイリアスを指定しない場合と、指定した場合の比較を見てみましょう。

// エイリアスを指定しない場合
import Button from '../../../components/common/Button';
import { fetchData } from '../../../utils/api/fetchData';
import { SITE_CONSTANTS } from '../../../../constants/site';

// エイリアスを指定した場合（@/*）
import Button from '@/components/common/Button';
import { fetchData } from '@/utils/api/fetchData';
import { SITE_CONSTANTS } from '@/constants/site';

エイリアスを使用すると、深い階層のファイルからのインポートが簡潔になり、ディレクトリ構造を変更した場合でもインポートパスを大幅に修正する必要がなくなります。

選択肢	内容
Yes	- デフォルトの@/*以外のカスタムエイリアスを設定できる - 独自のパスエイリアスをカスタマイズできる - tsconfig.jsonとjsconfig.jsonに設定が追加される
No	- デフォルトの@/*エイリアスが設定される - 特にカスタマイズが不要な場合はこれで十分

💡ヒント:

• 特別な理由がない限りNoで十分
• 大規模プロジェクトや特定の構造を持つプロジェクトではYesを検討

4. まとめ

create-next-appを使用したReact（Next.js）プロジェクトの設定は、プロジェクトの目的や規模によって選択肢が変わります。以下は個人的に思う推奨設定です。

オプション	小〜中規模のプロジェクト	大規模なプロジェクト
ESLint	Yes	Yes
Tailwind CSS	No	お好み
src/ ディレクトリ	Yes	Yes
App Router	No	Yes
Turbopack	お好み	お好み
インポートエイリアス	No	No

Next.jsの公式ドキュメントも参考にしながら、プロジェクトに最適な設定を選択してください。