Next.jsの環境構築方法

2025/07/02時点での環境構築を備忘としてまとめます。

前提条件

Next.jsには下記の条件を満たしている必要があります。

Node.js：Ver18.18以上

調べ方はターミナルなどを開いて

と入力
v20.18.0
などバージョンが表示されればインストールされています。

万一インストールされていない場合は下記からインストールしてください。

公式サイト

プロジェクトの作成

前提条件をクリアしている方は簡単です。下記コマンドを入力

すると

と表示されるので「y」と入力
するとプロジェクト名を問われるので好きなプロジェクト名を入力

その他は下記質問事項が問われます。

自分はざっとこんな感じで選びました。
正直練習用なら自由にやって大丈夫だと思います。

1. What is your project named?

意味：プロジェクト名をどうするか
ここで入力した名前がそのままフォルダ名になります。例えば「my-app」と答えると、my-appというディレクトリが作られ、そこにNext.jsのプロジェクトが展開される。

2. Would you like to use TypeScript?（TypeScriptを使いますか？）

Yes：.ts や .tsx ファイルで構成される TypeScript プロジェクトになります。
No：普通の JavaScript (.js, .jsx) プロジェクトになります。

TypeScriptとは？
JavaScriptに型を加えたもので、大規模開発や保守性を高めたいときに便利です。最近は使うのが主流になっています。

3. Would you like to use ESLint?（ESLintを使いますか？）

Yes：コードの文法チェックやスタイルチェックを自動でしてくれる ESLint が有効になります。ESLintとは？
ミスを減らすための静的解析ツール。たとえばセミコロンの付け忘れや未使用変数を警告してくれます。

4. Would you like to use Tailwind CSS?（Tailwind CSSを使いますか？）

Yes：Tailwind CSSが初期設定に含まれ、すぐに使える状態になります。

Tailwind CSSとは？
ユーティリティファーストなCSSフレームワーク。class="bg-blue-500 text-white p-4" のように、HTMLに直接デザインを当てられます。

5. Would you like your code inside a src/ directory?（src/ ディレクトリを使いますか？）

Yes：src/ フォルダの中にすべてのアプリケーションコードが入る構造になります。
No：ルートディレクトリに pages/ や app/ などが作られます。

おすすめ：Yes。整理された構造になるため、中〜大規模開発では特に良いです。

6. Would you like to use App Router? (recommended)（App Routerを使いますか？）

Yes：Next.js 13以降の新しい「App Router」構造（app/ ディレクトリベース）を使用します。
No：従来の「Pages Router」構造（pages/ ディレクトリベース）を使用します。

App Routerの特徴：

• Layoutやテンプレート機能が強化されている
• React Server Componentが使える
• より柔軟でスケーラブルな設計が可能

※学習コストはやや高めだが、今後主流になってくる。

7. Would you like to use Turbopack for next dev?（開発用ビルドにTurbopackを使いますか？）

Yes：開発環境に Turbopack が使われます（今はベータ版）。
No：従来の Webpack ベースの開発サーバーが使われます。

Turbopackとは？
Vercel製の超高速ビルドツール。まだ正式リリースではないけど、開発スピードはかなり速くなる。

8. Would you like to customize the import alias (@/* by default)?（インポートのエイリアスをカスタマイズしますか？）

Yes：@/components/ のように、パスの省略記法を自由に設定できます。
No：デフォルトの @/ が使われます。

Import Aliasとは？
相対パス (../../../components/) を省略して、@/components/ のようにすっきり書ける便利機能。

9. What import alias would you like configured? @/（どんなエイリアスを設定しますか？）

@/*：src/以下のファイルを簡単に import できるようにする例。
たとえば src/components/Header.tsx を @/components/Header と書けます。

成功したら下記みたいな表示でます。

必要なパッケージのインストール

上記実行し、必要なパッケージをインストール

サーバーの起動

http://localhost:3000にアクセスし

こんな感じでページが表示されればOKです。

お疲れ様でした。

参考

Next.js 公式ドキュメント

Tailwind CSS 公式

TypeScript Handbook

ESLint 入門記事（日本語）