🤖

VScodeを使ってNext.jsの環境構築

2024/02/28に公開

はじめに

この記事はあくまで自分用のメモ程度の記事です。VScodeの使い方やNext.jsについて解説する記事ではございません。

動作環境

  • OS: Windows 11 pro
  • Node.js v18.16.1
  • Next.js
  • Git
  • VScode
    • GitLens
    • ESLint
    • Prettier

Next.jsのインストール

ターミナルを開いて以下のコマンドを入力。

npx create-next-app@latest

質問にそってキーボードをポチポチすれば完了。

Next.jsの起動

VScodeで作成したプロジェクトを開く。VScodeのターミナルを開いて以下のコマンドを入力。

npm run dev

http://localhost:3000/ にアクセスすればサイトが表示される。

Githubへコミット

Githubへコミットしコードを管理する。
まずはGithubでリポジトリを新規作成する。
作成したらばVScodeのターミナルへ以下のコマンドを順番に実行する。

git init
git remote add origin <GithubリポジトリのURL>
git branch -M master
git add *
git commit -m "first commit"
git push origin master

二回目以降はこれ。

git add *
git commit -m "<コメント>"
git push origin master

デプロイ

Vercelへデプロイする。
プロジェクトを追加し、Githubのリポジトリを連携、デプロイすれば完了。
コンパイルが終了すれば公開される。

Discussion