このチャプターの目次
まずは最低限の下準備をして動くところまで進めていきます。
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
にアクセスするとページが表示されます。
これで最初の準備は整いました。うまく動かない場合は環境設定がうまくいっていない可能性がありますので、エラーメッセージなどを確認してみてください。