開発環境構築

最終更新: 2022年02月10日

報告

初期化の前に

PC上の任意の場所にプロジェクトをまとめるディレクトリを作成しておくことをお勧めします。Macの場合ユーザーディレクトリに「Projects」などの名前で作成しておくと良いでしょう。デスクトップなどに直接プロジェクトを作成すると散らかるためお勧めしません。

Next.js の初期化

任意の場所でターミナルを開き、以下のコマンドを実行します。--typescript によりあらかじめTypeScriptが組み込まれた環境が構築されます。

ターミナル
npx create-next-app@latest --typescript

構築が終わったらVisual Studio Codeなどのエディターで作成されたディレクトリを開きましょう。

Visual Studio Codeからディレクトリを開く

ターミナルで該当ディレクトリに移動した上で code . とすることでプロジェクトディレクトリを対象にVisual Studio Codeを起動することができます。code の後ろに半角スペースがある点に注意してください。

ターミナル
cd <プロジェクト名>
code .

:::

開発サーバーの起動

プロジェクトディレクトリで以下のコマンドを実行することで開発サーバーが起動します。表示されるURLからアプリの最新状態を確認することができます。

ターミナル
npm run dev
# 以下のように表示されるのでURLをブラウザで開く
# ready - started server on 0.0.0.0:3000, url: http://localhost:3000

問題なく表示されていれば環境構築は終了です。以後ファイル修正に合わせて表示内容が自動的に更新されます。

  • サーバー起動中はターミナルの該当タブは操作を受け付けなくなります。操作が必要な場合別のタブを開いてください。
  • サーバー起動中のタブで ctrl + c というショートカットによりサーバーを停止できます。

開発サーバーを再起動すべきシーン

Next.js の環境変数を変更した場合は開発サーバーの再起動が必要です。また、原因不明のエラーで開発が難航している場合一度サーバーを再起動することで解決することがあります。再起動は一度サーバーを停止した上で再度サーバーを起動するだけです。