Next.jsで始めるReact開発環境の構築手順

2341 ワード
Next.js React tech テキストリンク

記事の目的

Next.jsフレームワークでReact開発環境を構築を行った際の手順をまとめました。

実行環境

Windows 10 Home

node.jsのインストール

https://nodejs.org/ja/download/
上記サイトからWindows用のnode.jsインストーラをダウンロードしてインストールします。
※LTS（推奨版)をインストールしてください。

nextプロジェクトを作成

コマンドラインツールから任意フォルダ上で
create-next-appコマンドを実行するとnext.jsのプロジェクトフォルダが作成されます。
※next-appには任意のプロジェクト名を設定します。

PowerShell
npx create-next-app next-app

ローカルサーバを起動

作成したフォルダ内で
npm run devコマンドを実行するとローカル上でアプリが起動します。

next-app/
npm run dev

動作確認

ブラウザを開いてhttp://localhost:3000/ にアクセスするとnext.jsアプリのデフォルトで用意された画面が表示されます。

エディタでnext-app/pages/index.jsファイルを開き、h1タグ内の文字を編集します。

next-app/pages/index.js
<h1 className={styles.title}>
   Welcome to <a href="https://nextjs.org">テスト</a>
</h1>

保存すると、ブラウザ上で即時反映されることが確認できます。

Jest(ts-jest),VSCode環境で表示される”Cannot find name '〇〇'.”エラーの解決方法
FizzBuzz問題から始めるReact.js