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

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

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

Windowsをご利用の場合は、Git for Windowsをダウンロードし、それに付属するGit Bashを使用することをお勧めします。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しましょう。

cd nextjs-blog

次に、以下のコマンドを実行します。

npm run dev

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

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