【Next.js】インストールして起動するまでの解説

作成日: 2025年10月08日更新日: 2025年10月08日

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:22.14.0
npm:10.9.2
next:15.2.4

Next.jsをインストールして起動するまでの手順

Next.jsをインストールして起動するまでの手順について解説していきます。

Node.jsのインストール

最初にNode.jsをインストールする必要があります。 Node.jsは、Reactの実行に必要なJavaScriptランタイムであり、JavaScriptエンジン上に構築されたJavaScript実行環境の1つです。以下のリンクから、「windows」「mac」「linux」など自分の環境に合ったNode.jsのインストーラーをダウンロードしてインストールします。 https://nodejs.org/en/download/ 下記のコマンドでバージョン情報が表示されていればインストール成功です。


1node -v
2npm -v

Next.jsプロジェクトの作成

Next.jsを使用するための新しいプロジェクトを作成します。 Next.jsプロジェクトはコマンドラインで以下のコマンドを実行することにより、Next.jsの開発に必要なすべてのツールを含む新しいプロジェクトを作成することができます。


1npx create-next-app@latest next-app

create-next-appがNext.jsプロジェクトを作成するためのコマンド、next-appがプロジェクト名になります。このコマンドを実行すると、以下のような質問が順に表示されるので、自分の開発スタイルに合わせて選択してください。


1# create-next-app セットアップ項目
2✔ Would you like to use TypeScript? ... No / Yes
3✔ Would you like to use ESLint? ... No / Yes
4✔ Would you like to use Tailwind CSS? ... No / Yes
5✔ Would you like your code inside a src/ directory? ... No / Yes
6✔ Would you like to use App Router? (recommended) ... No / Yes
7✔ Would you like to use Turbopack for next dev? ... No / Yes
8✔ Would you like to customize the import alias (@/* by default)? ... No / Yes
9✔ What import alias would you like configured? ... @/*

それぞれの項目の意味は以下の通りです。

TypeScript: 型安全なJavaScriptで開発するための選択。
ESLint: コードの品質やスタイルチェックのためのツール。
Tailwind CSS: 実用的なユーティリティクラスを使ったCSSフレームワーク。
src/ディレクトリ: ソースコードをsrc/内にまとめる構成。
App Router: Next.jsの最新のルーティングシステム（推奨）。
Turbopack: 高速なビルドとホットリロードを可能にする次世代ビルドツール。
インポートエイリアス: @/components/Button のように、パスを短く管理できる設定。

すべての選択が完了すると、自動的に必要なパッケージのインストールが行われ、プロジェクトが作成されます。また、npx create-next-appコマンドを実行すると、Next.jsプロジェクトが作成され、その中で必要な依存関係（next react react-dom）が自動的にインストールされます。

Next.jsプロジェクトの起動

Next.jsプロジェクトが作成されたら、コマンドラインで以下のコマンドを使用してアプリケーションを起動します。


1cd next-app
2npm run dev

cdで作成したNext.jsプロジェクトのディレクトリへ移動し、npm run devでNext.jsプロジェクトを起動することができます。ブラウザでhttp://localhost:3000にアクセスし、Next.jsアプリケーションの初期画面が表示されていれば成功です。

おわりに

ここまで、Next.jsをインストールして開発サーバーを起動するまでの手順をご紹介してきました。 npmパッケージマネージャーを利用することで、Reactをベースにしたプロジェクトの作成やアプリケーションの立ち上げを簡単に行うことができます。 Next.jsは、モダンなフロントエンド開発の中でも非常に人気が高く、多機能で拡張性にも優れています。ぜひ、ReactとNext.jsを活用したモダンな開発環境に挑戦してみてください。