create-next-appを使って作成した開発環境をGitHubで新規リポジトリとして登録する

Next/Reactを使った開発を行う初学者向けの記事になっています。
create-next-appコマンドを使用して開発環境を整えるところから、GitHubで新規リポジトリを作成し、Vercelにデプロイするところまでを備忘録として残します。

個人開発をしていた身として、あまりGitHubでチーム開発とかした経験がなかったので、新規リポジトリの作り方から躓いてしまいました。他サイトを参考にさせていただきましたが、どうもGitHubで新規リポジトリ作成からVercelでデプロイするところまでが一貫して解説しているのを見つけられなかったので、紹介します。

大前提：
GitHubのアカウント作成済み
Vercelのアカウント作成済み
npmを使用していて、yarnが入っていない状態
create-next-appコマンドが使用できる状態

create-next-appコマンドを使って開発環境構築

create-next-appコマンドを使用して、開発環境を構築します。
npx create-next-app hogehoge
すると、hogehogeフォルダが作成され、その中にpages,public,stylesなどのファイルが作成されていきます。

フォルダが作成されたらnpm run devコマンドでlocalhostサーバーを立ち上げます。
npm run dev

GitHubで新規リポジトリを作成する

New repositoryから作成していきます。

Descriptionなど特段変更がなければ必須項目ではないので、設定せずにCreate repositoryすることができます。個人開発ならprivateで問題ないでしょう。

以下の画面が表示されればOKです。

ここまでできたら、このブラウザを開いたままにして、次に進んでください。

ローカル環境のフォルダ(create-next-appで作成した）とGitHubを接続する

GitHubでリポジトリを作成した際に生成されたリンクをコピーしておきます。

プロジェクトのディレクトリのルートに移動します。
cd hogehoge
ローカルのリポジトリを新規作成します。
git init
hogehogeディレクトリの中身を全てインデックスに登録します。
git add -A
GitHubにコミットします。
git commit -m "first commit"
ブランチをmainにします（初期ブランチがmainの場合は必要ありません)。
git branch -M main
リモートリポジトリを指定します。（GitHubで作ったリポジトリを選択する)
git remote add origin https://github.com/KiraKobayashi/hogehoge.git
リモートリポジトリへプッシュします。この時、GitHubのUsernameとPasswordが必要です。（＊２０２１年8月13日からパスワードの代わりに、GitHubのpersonal access tokenを使用します。）
git push -u origin main
pushが完了したら完成です。