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

開発環境

• 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/

下記のコマンドでバージョン情報が表示されていればインストール成功です。

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

Next.jsを使用するための新しいプロジェクトを作成します。

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

create-next-appがNext.jsプロジェクトを作成するためのコマンド、next-appがプロジェクト名になります。

このコマンドを実行すると、以下のような質問が順に表示されるので、自分の開発スタイルに合わせて選択してください。

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

• 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プロジェクトが作成されたら、コマンドラインで以下のコマンドを使用してアプリケーションを起動します。

cdで作成したNext.jsプロジェクトのディレクトリへ移動し、npm run devでNext.jsプロジェクトを起動することができます。

ブラウザでhttp://localhost:3000にアクセスし、Next.jsアプリケーションの初期画面が表示されていれば成功です。

おわりに

ここまで、Next.jsをインストールして開発サーバーを起動するまでの手順をご紹介してきました。

npmパッケージマネージャーを利用することで、Reactをベースにしたプロジェクトの作成やアプリケーションの立ち上げを簡単に行うことができます。

Next.jsは、モダンなフロントエンド開発の中でも非常に人気が高く、多機能で拡張性にも優れています。

ぜひ、ReactとNext.jsを活用したモダンな開発環境に挑戦してみてください。