新しい Next.js アプリをセットアップ

まず、開発環境の準備が整っていることを確認しましょう。

• Node.js がインストールされていない場合は、こちらからインストールしてください。Node.js バージョン 18 以上が必要です。
• このチュートリアルでは、お使いのテキストエディタとターミナルアプリを使用します。

Windows を使用している場合は、Git for Windows をダウンロードし、付属の Git Bash を使用することをお勧めします。これにより、このチュートリアルで使用する UNIX 固有のコマンドがサポートされます。Windows Subsystem for Linux (WSL) も別の選択肢です。

Next.js アプリを作成

Next.js アプリを作成するには、ターミナルを開き、アプリを作成したいディレクトリに cd で移動して、次のコマンドを実行します：

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

内部的には、create-next-app というツールを使用しており、Next.js アプリを自動的にセットアップします。--example フラグを通じてこのテンプレートが使用されます。

動作しない場合は、このページを参照してください。

開発サーバーを起動

これで nextjs-blog という新しいディレクトリが作成されました。このディレクトリに移動します：

cd nextjs-blog

次に、次のコマンドを実行します：

npm run dev

これにより、Next.js アプリの「開発サーバー」（詳細は後述）がポート 3000 で起動します。

動作確認をしましょう。ブラウザから http://localhost:3000 を開いてください。