<aside> 💫 バージョン10.13以降のNode.jsが必要だよ！ ターミナルを開き、node -v でバージョンを確認しよう！

</aside>

【公式ドキュメント】

Learn | Next.js

環境構築

1. ターミナルを開き、プロジェクトを格納している大元のフォルダにcd で移行する

   <aside> 💫 私の場合、実案件ならclient folder、個人開発や学習ならReactAppFilesになるかな。

   </aside>

2. 以下コマンドを実行する。YOUR_NEW_PROJECT_NAME には任意の新規フォルダ名を入れる。

   ※URLも含めてコマンド実行してね！

   npx create-next-app YOUR_NEW_PROJECT_NAME
   

3. 「create-next-app」パッケージのインストールが必要です。続行しますか？と聞かれるので、y を実行

4. 無事にインストールされたら、該当フォルダが入っているか確認。あればエディタでフォルダを開く

5. エディタのターミナルを開き、以下コマンドを実行してローカルサーバーを開く。

   npm run dev

   この時Reactのように自動ではブラウザ表示されないので、ターミナルに記載のURLをコピーして、ブラウザに貼り付けて開くこと。URL：http://localhost:3000

   あるいは、ターミナルに記載のURLにカーソルを当てたまま、command + click でも開けるよ！

6. next.config.jsを開き、reactStrictModeがtrueになっているか確認する

   これの大切さについてはStrictModeの挙動 を参照のこと

   ▼公式

   next.config.js: React Strict モード | Next.js

🎉構築完了！🎉

GitHub登録

<aside> ⚠️ npm run dev でNext.jsを走らせていた場合は、一旦control + C で止めておくこと！

</aside>

1. 普段通りにGitHubでリモートリポジトリを作成する

   <aside> ⚠️ READMEなどを作成する必要はないよ！何も作らずにリポジトリのみ作成しよう！

   </aside>

2. 先ほど作成したNext.jsフォルダを開いているVSCodeのターミナルに以下コマンドを叩く

   ※リモートリポジトリを作成後に表示される画面の2番目の方法のコードをコピペすればいいよ

   /* ssh版 */
   git remote add origin [email protected]:アカウント名/リポジトリ名.git
   git branch -M main
   git push -u origin main
   
   /* https版 */
   git remote add origin <https://github.com/アカウント名/リポジトリ名.git>
   git branch -M main
   git push -u origin main
   

3. GitHubを更新し、フォルダ一式がプッシュされているか確認

4. プッシュされていれば、SourceTreeを開き、新規＞既存のローカルリポジトリを追加　から該当フォルダを設定すれば完了！

5. 念の為、ブランチを切った状態で適当にテストをおこない、リモートも変更されているか確認するといいかも。