Next.jsのセットアップ
yarn create next-app
その後プロジェクト名を設定し、successと出たら、
cd プロジェクト名
yarn dev
ローカルホストで立ち上がったことを確認し、URLをChromeで表示
yarnが使えないときは
brew install -g yarn
//yarnがインストールされていることを確認(バージョンが表示される)
yarn -v
ProjectをVSCodeで開く
package.jsonのスクリプトを見ると、dev,build,startがある
devとbuildしてstartした時の違い
buildしてstartした時は、本番環境用にコードを圧縮して最適化されるので、devと比べて圧倒的に速度が速い
一方で、devの時は、開発のときに最適化されていて、コードの変更があったときに、ブラウザに自動的に反映される
プロジェクトをGitHubにアップし、vercelと連携させてデプロイする
Githubにアップ
Githubで新たにリポジトリを作成し、ターミナルで以下のコマンドを叩く
git remote add origin <URL>
git branch -M main
git push -u origin main
その後、GitHubのページを更新すると反映されていることが確認できる
Vercelと連携
Vercelを開いて、New Projectをクリックし、連携させたいプロジェクト名を選択し、Deployすると、本番環境のURLが割り振られる