発行:

Next.jsの起動方法

Next.js を実際に動かして、開発の第一歩を踏み出しましょう。
このページでは、以下の手順を解説します。

  • Next.js プロジェクトの作成
  • ローカルサーバーの起動と確認

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

Node.js がインストールされていれば、npm (Node Package Manager) というツールが使えます。
この npm を使用して、Next.js のセットアップコマンド（create-next-app）を実行します。

MacOS なら Terminal、Windows なら PowerShell やコマンドプロンプトを開き、以下のコマンドを入力してください。

COMMAND
npx create-next-app@latest

コマンドを実行すると、対話形式でプロジェクトの設定に関する質問が表示されます。
以下は回答の一例です。

Next.js プロジェクト作成

create-next-app の設定項目

質問事項解説今回の選択
What is your project named?作成するディレクトリ（プロジェクト）の名前を決めます。my-app
Would you like to use TypeScript?TypeScript を使用するかどうか。Yes
Would you like to use ESLint?コードの品質チェックツール（ESLint）を使用するかどうか。Yes
Would you like to use Tailwind CSS?CSSフレームワーク（Tailwind CSS）を使用するかどうか。Yes
Would you like to use src/ directory?ソースコードを src ディレクトリにまとめるかどうか。Yes
Would you like to use App Router?[重要] 新しいルーティング方式（App Router）を使うかどうか。Yes
**Would you like to customize the default import alias (@/*)? **インポートパスのエイリアス（別名）設定をカスタマイズするか。No

※ 画面の表示や質問項目は、リリース時期や最新の仕様によって若干異なる場合がありますが、基本的には上記のような構成を選択すれば問題ありません。

Next.js の起動

プロジェクトの作成が完了したら、作成されたディレクトリに移動して開発サーバーを立ち上げます。

COMMAND
# 作成したプロジェクトのディレクトリへ移動
cd my-app

# 開発サーバーを起動
npm run dev

ターミナルに「Ready」と表示され、起動が完了した旨のメッセージが出れば成功です。

Next.js プロジェクト起動

ブラウザを開き、http://localhost:3000 にアクセスしてみてください。
Next.js のロゴが表示されたスタート画面が出れば、環境構築と起動は完璧です！

Next.js スタートアップ画面

Next.js の停止

開発サーバーを停止するには、ターミナルで Ctrl + C をキー入力します。

まとめ

Next.js プロジェクトを作成し、ブラウザで動作確認するところまで完了しました。
コマンド一つでモダンな開発環境が整うのが Next.js の魅力の一つです。

次章では、自動生成されたファイルやディレクトリがそれぞれどのような役割を持っているのか、プロジェクトの全体像を解説します。