はじめに
この記事はMacOSにNode.jsをインストールし、Next.jsの開発ができるまでの準備手順を記した記事です。
Node.jsをインストールする
※この記事ではcurlを用いたインストールを採用しています。
プロンプト実行例
コマンドラインデベロッパーツールのインストール
あらかじめコマンドラインデベロッパーツールをインストールしておく。
プロンプト実行例
nodeとnpm(npx)がインストールできていることを確認する。
確認プロンプト
node -v
npm -v
npx -v
環境変数の設定(.zshrc)
次回起動時にも環境変数が読み込めるようにしておく。
touch ~/.zshrc
nano ~/.zshrc
source ~/.zshrc
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
Next.jsのプロジェクト作成 & 起動
以下のプロンプトで任意のプロジェクトを作成する。ここではtest-appとしています。
プロジェクト作成プロンプト
npx create-next-app@latest test-app
プロジェクトが作成できたら、そのプロジェクト内に移動して、起動する
起動プロンプト
cd test-app
npm run dev
ローカルホスト環境へ接続できれば、開発準備が整う。あとはVisual Studio Codeで開発を進めていく。
http://localhost:3000/
