TypeScript導入の意義と基本設定
この節で学ぶこと
この節では、create-next-app を使って Next.js プロジェクトを作る意味、流れ、選択肢を、初心者向けに整理します。Next.js の公式では、新しいアプリを最も素早く作る方法として create-next-app が案内されており、TypeScript、Tailwind CSS、ESLint、App Router、Turbopack などの初期設定をまとめて整えられます。
ここで大切なのは、コマンドを丸暗記することではありません。
「なぜこのコマンドで始めるのか」 が分かることです。自分で机と工具を一つずつ並べるのではなく、最初から作業しやすい机を受け取る。それが create-next-app の感覚です。公式も “sets up everything automatically for you” と説明しています。
create-next-appとは何か
はじめに
create-next-app は、Next.js の新規プロジェクトを公式の推奨構成で自動生成する CLI ツールです。Next.js 公式の Installation ページでは、「新しい Next.js アプリを作る最も速い方法」として紹介されています。
初心者の視点で言い換えると、これは「Next.js 用のスターター作成機」です。
空のフォルダに自力で package.json、app ディレクトリ、TypeScript 設定、ESLint 設定、Tailwind CSS 設定を積み上げるのは、最初はかなり骨が折れます。create-next-app を使えば、そこを一気に飛び越えられます。
何が自動で整うのか
2026年4月時点の Next.js 公式ドキュメントでは、--yes を付けて既定値で作成した場合、TypeScript、Tailwind CSS、ESLint、App Router、Turbopack、import alias @/* が有効になります。また、AGENTS.md と、それを参照する CLAUDE.md も含まれると明記されています。
これはかなり重要です。
昔の教材だと「TypeScript をあとで足します」「ESLint を別途入れます」という説明が多かったのですが、現在の標準はもっと一体的です。今は、最初から実務で使いやすい形に近い初期状態を受け取る発想に変わっています。
作成前に必要なもの
Node.js
Next.js の公式 Installation ページでは、最低 Node.js バージョンは 20.9 とされています。対応 OS は macOS、Windows（WSL を含む）、Linux です。
つまり、Node.js が入っていない状態では始められません。
この段階では「Node.js は JavaScript をローカルで動かす土台」と理解しておけば十分です。料理にたとえるなら、コンロがないのにレシピだけ見ている状態では進めない、ということです。
パッケージマネージャー
Next.js 公式では、pnpm、npm、yarn、bun の4種類の流れが案内されています。CLI オプションにも --use-npm、--use-pnpm、--use-yarn、--use-bun が用意されています。
初心者のうちは、どれを選んでも学習は進められます。
ただ、教材として統一するなら、1つに固定して学ぶ方が混乱しにくいです。今回は読みやすさを優先して、pnpm と npm の両方を例に出します。
最短でプロジェクトを作る
pnpmを使う場合
Next.js の公式 Quick start では、次の流れが案内されています。
pnpm create next-app@latest my-app --yes
cd my-app
pnpm dev
この3行は、それぞれ次の意味です。
- 1行目：
my-appという名前で新しい Next.js プロジェクトを作る - 2行目：作成したフォルダに移動する
- 3行目：開発サーバを起動する
この時点で、公式では
http://localhost:3000にアクセスして確認する流れになっています。
npmを使う場合
公式ページはタブで npm 版も案内しています。考え方は同じです。
npx create-next-app@latest my-app --yes
cd my-app
npm run dev
見た目は少し違いますが、本質は同じです。
「Next.js プロジェクトを作る」「その中へ入る」「開発サーバを動かす」。この3段階です。
-yes を付けると何が起きるのか
対話を省略して既定値で作る
Next.js 公式では、--yes はsaved preferences または defaults を使ってプロンプトをスキップすると説明されています。既定のセットアップでは、TypeScript、Tailwind CSS、ESLint、App Router、Turbopack、import alias @/* が有効です。
これは初心者にとってかなり便利です。
質問が多いと、それだけで不安になります。まだ意味が分からない選択肢に何個も答えるより、まずは既定値で1回動かしてみる。そのあとで「この設定は何だったのか」を逆算して学ぶ方が、体験として自然です。
ただし、設定の意味を知らずに進みすぎない
便利だからといって、全部ブラックボックスにしてよいわけではありません。
この節の目的は、“押せば作れる” で終わらず、“何が選ばれているか” まで把握することです。今後の節では、src ディレクトリ、App Router、ESLint、import alias などを順番に見ていきます。
対話形式で作ると何を聞かれるのか
実際の質問項目
Next.js 公式の Installation ページでは、customize settings を選ぶと次のような質問が出ると説明されています。
- TypeScript を使うか
- どの linter を使うか（ESLint / Biome / None）
- React Compiler を使うか
- Tailwind CSS を使うか
- コードを
src/ディレクトリに入れるか - App Router を使うか
- import alias をカスタマイズするか
- どの alias を使うか
これを見ると、「ただの作成コマンド」ではなく、プロジェクトの設計方針を最初に決める入口であることが分かります。
初学者向けのおすすめの考え方
初心者なら、まずはこう考えると理解しやすいです。
- TypeScript：Yes
現在の既定値でも有効です。型があると早い段階で間違いに気づきやすくなります。
- Linter：ESLint か Biome
公式の既定値は文脈によって変わり得ますが、少なくとも選択肢として ESLint / Biome / None が提示されています。ESLint には @next/eslint-plugin-next による Next.js 向けルールが含まれます。
- Tailwind CSS：Yes
既定値でも有効です。後から入れるより最初からある方が学習は滑らかです。
- src directory：好みだが Yes でもよい
中規模以上では整理しやすくなります。
- App Router：Yes
公式でも recommended と表示されています。
- import alias：既定の
@/*で十分 これも既定値です。
よく使う CLI オプションを読む
重要なオプション一覧
create-next-app の CLI リファレンスには、主要オプションとして次が載っています。
-ts/-typescript：TypeScript プロジェクトとして初期化-js/-javascript：JavaScript プロジェクトとして初期化-tailwind：Tailwind CSS 設定ありで初期化-eslint：ESLint 設定ありで初期化-biome：Biome 設定ありで初期化-app：App Router プロジェクトとして初期化-api：route handlers のみを持つプロジェクトとして初期化-src-dir：src/ディレクトリ配下で初期化-turbopack：生成されるpackage.jsonで Turbopack を強制有効化-webpack：Webpack を使う設定にする-import-alias <alias>：import alias を指定-use-npm/-use-pnpm/-use-yarn/-use-bun：使用するパッケージマネージャーを明示
これを全部一気に覚える必要はありません。
ただ、「create-next-app は単なるひな形生成ではなく、初期設計をコマンドで表現できる」 という点は押さえておく価値があります。
実例を1つ見る
たとえば、次のコマンドはかなり意味が読みやすい例です。
pnpm create next-app@latest my-app \
--ts \
--tailwind \
--eslint \
--app \
--src-dir \
--use-pnpm
この1行を日本語にすると、次のようになります。
「my-app という名前で、TypeScript あり、Tailwind CSS あり、ESLint あり、App Router あり、src 構成あり、pnpm を使う Next.js プロジェクトを作ってください」
コマンドは怖く見えますが、実際には設定の宣言文です。
作成後に何ができれば成功なのか
pnpm dev または npm run dev が通る
プロジェクト作成がうまくいっていれば、開発サーバの起動コマンドが動きます。Quick start でも、作成後に pnpm dev を実行する流れが示されています。
pnpm dev
または
npm run dev
このときローカルで画面が開き、初期ページが見えれば、環境構築の第一歩は成功です。
localhost:3000 で画面を確認できる
公式 Quick start では、Visit http://localhost:3000 と案内されています。つまり、コードが動く場所はブラウザ上の localhost:3000 です。
ここは初心者にとって大きなポイントです。
ターミナルでコマンドを打った結果が、最終的にはブラウザで見える。
この橋渡しが見えた瞬間、「自分は今 Web アプリを動かしている」という実感が出てきます。
Turbopack と Webpack をどう見ればよいか
現在の既定は Turbopack
Next.js の Installation ページでは、Turbopack is now the default bundler と明記されています。Webpack を使いたい場合は next dev --webpack や next build --webpack を実行すると案内されています。
これを初心者向けに言い換えると、
今の標準の動かし方は Turbopack ベース であり、以前の教材や記事の一部は Webpack 前提で書かれている可能性がある、ということです。
古い記事を読むときの注意
検索で出てくる記事の中には、「Next.js の既定は Webpack」としているものがあります。
しかし、少なくとも現在の公式ドキュメントでは、既定の bundler は Turbopack です。ここは教材として、かなり重要な更新点です。
公式例から始める方法もある
-example でテンプレートを変えられる
create-next-app には --example オプションがあり、公式 Next.js examples を使ってプロジェクトを作成できます。CLI リファレンスには pnpm create next-app --example [example-name] [your-project-name] という例が載っています。
pnpm create next-app --example with-supabase my-supabase-app
この形は、単なる空のスターターではなく、特定用途の構成を土台に始めたいときに便利です。
初心者のうちはまず標準構成でよいですが、将来的には「認証付き」「MDX 対応」「CMS 連携済み」などの例から始める発想も出てきます。
初心者がつまずきやすい点
1. コマンドが長い。
これは普通です。ただ、1回分解して意味が分かると、読み物になります。
pnpm create next-app@latest my-app --yes
pnpm：pnpm を使うcreate next-app@latest：最新の create-next-app を使うmy-app：作るフォルダ名-yes：質問を省略して既定値で進む
長い呪文ではなく、短い宣言の集合です。
2. どの設定を選べばよいか分からない
最初は全部理解しなくて大丈夫です。
むしろ、1回は既定値で作る、そのあと「この設定は何だったのか」を学ぶ方が、経験として定着しやすいです。公式の既定値は TypeScript、Tailwind CSS、ESLint、App Router、Turbopack、@/* alias です。
3. すぐアプリを書くべきか、設定を読むべきか迷う
答えは両方ですが、順番があります。
まずは 作る → 動かす → 中を見る です。
組み立て説明書を最初から全部読むより、いったん完成図を見てから部品の役割を理解した方が、初心者には入りやすいことが多いです。
実践
既定値で1回作ってみる
まずは次の3行だけで十分です。
pnpm create next-app@latest my-first-next-app --yes
cd my-first-next-app
pnpm dev
ブラウザで http://localhost:3000 を開き、初期画面が見えたら成功です。
ここで「自分は何かを設定した」のではなく、「自分は開発環境を起動できた」 と感じられると、この節の価値が生きます。
次に中身を見る
作成できたら、次のファイルやフォルダを眺めてください。
my-first-next-app/
├─ app/ または src/app/
├─ public/
├─ package.json
├─ tsconfig.json
└─ eslint.config.mjs など
この段階では、全部を理解しなくて大丈夫です。
ただ、create-next-app が「単に空のフォルダを作った」のではなく、すでに動く Web アプリの骨格を作っていることは実感できるはずです。
練習問題
問1
create-next-app の主な役割として最も適切なものはどれですか。
A. 画像だけを圧縮する
B. Next.js プロジェクトを推奨構成で自動生成する
C. データベースを自動で本番運用する
D. CSS だけを書くためのツールを作る
答え
B
解説
Next.js 公式では、create-next-app は新しい Next.js アプリを最も速く作る方法であり、必要なものを自動でセットアップすると説明されています。
問2
2026年4月時点の Next.js 公式 Quick start で、--yes を付けた既定値に含まれるものとして正しいものはどれですか。
A. TypeScript、Tailwind CSS、ESLint、App Router、Turbopack
B. Vue、Nuxt、Sass、Webpack のみ
C. Java、Spring Boot、Maven
D. Docker、Kubernetes、Terraform
答え
A
解説
公式 Quick start では、--yes により TypeScript、Tailwind CSS、ESLint、App Router、Turbopack、import alias @/* などを含む既定構成で作成されると説明されています。
問3
create-next-app の対話設定で表示される項目として、公式に載っているものはどれですか。
A. App Router を使うか
B. 銀行口座番号を保存するか
C. 画面の明るさを変更するか
D. CPU ファンの回転数を固定するか
答え
A
解説
Installation ページの対話プロンプトには、TypeScript、Linter、React Compiler、Tailwind CSS、src/ directory、App Router、import alias などが並んでいます。
問4
現在の Next.js 公式 Installation ページで、既定の bundler として説明されているのはどれですか。
A. Parcel
B. Rollup
C. Turbopack
D. Gulp
答え
C
解説
公式には “Turbopack is now the default bundler.” と書かれています。Webpack を使う場合は next dev --webpack や next build --webpack を使います。
問5
次のコマンドの意味として最も近いものはどれですか。
pnpm create next-app@latest my-app --yes
A. my-app という名前の Next.js プロジェクトを既定値で作る
B. my-app という画像を圧縮する
C. Node.js をアンインストールする
D. ブラウザ履歴を削除する
答え
A
解説
create-next-app@latest は最新の create-next-app を使い、my-app はプロジェクト名、--yes は既定値または保存済み設定でプロンプトを省略する指定です。
まとめ
この節で押さえたい本質は、create-next-app は単なる便利コマンドではなく、Next.js の公式な出発点だということです。公式では最短の開始方法としてこれを案内し、現在の既定値には TypeScript、Tailwind CSS、ESLint、App Router、Turbopack などが含まれています。
初心者にとって大事なのは、「作成できた」という事だけではありません。
なぜこの方法で始めるのか、どんな設定が一緒に入ってくるのか が見えていることです。そこが見えると、次の package.json、app ディレクトリ、ESLint、Path Alias の学習が、ただの暗記ではなくつながった理解に変わります。
参考文献
- Next.js Documentation, Getting Started: Installation.
- Next.js Documentation, CLI: create-next-app.
- Next.js Documentation, CLI: next CLI.