プロジェクトを作成する

まずは最低限の下準備をして動くところまで進めていきます。

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

まずは、コマンドを利用してプロジェクトを初期化します。今回は Yarn を利用するため、下記のコマンドを実行します。最後の nextjs-firebase-app は自由に決めることができます。

yarn create next-app nextjs-firebase-app

色々と表示されますが、最後に下記のようなメッセージが表示されれば完了です。

これらのメッセージは実際に開発で利用するコマンドの解説です。慣れてくれば初期化時にこのメッセージを見てコマンドを思い出しつつ、すぐに開発を進められます。

プロジェクトのフォルダへ移動

プロジェクトは先程指定した、例でいうと nextjs-firebase-app フォルダに作成されていますので、まずはそこへ移動します。先程一番下に表示されていたメッセージ通りのコマンドです。

cd nextjs-firebase-app

試しに実行

まずは何もいじっていないこのプロジェクトが正常に動くかどうか確認しておきましょう。下記のコマンドで実行できます。

yarn dev

下記のように表示されれば正常です。

メッセージに表示された URL である http://localhost:3000 にアクセスするとページが表示されます。

これで最初の準備は整いました。うまく動かない場合は環境設定がうまくいっていない可能性がありますので、エラーメッセージなどを確認してみてください。