Next.js 開発環境は「nodenv」で構築しましょう。
特に、M1・M2 MacだとHomebrewで環境構築するので、なんとなく似た名前の「nodebrew」でNext.js 開発環境を構築する人が多い気がします。
あーだこーだ迷うのも面倒で、まず結論です。
結論
Next.jsの開発環境は「nodenv」で導入すること。
確かにnodenv、nodebrewのどちらを使ってもNext.jsの開発環境を構築できますが、その違いはJSのバージョン管理です。詳しくは後述します。
また、nodenvならanyenvを経由して、Ruby、Pythonなども含めて他の言語環境おtあわせて一元管理できます。まぁ、JSのみ利用する方でも「nodenv」で良いです。
さて、この記事ではNext.jsの開発環境、デプロイ先云々を「結論構成」と位置付けて解説します。これからNext.jsを使おうという方にとっては、あれこれ迷うことなく時短できる記事になっています。
ぜひ、ご参考ください。
スキル、開発環境、デプロイ先の結論構成（システム構成）
| スキルセット | ローカル | デプロイ先 | |
|---|---|---|---|
| 開発環境 | フロントエンド | バックエンド | |
| HTML&CSS | VS Code | Vercel | DB Supabase |
| JavaScript | Git | CMS Sanity | |
| Next.js （React、Node.js） | nodenv | CDN CloudFlare | |
スキル、開発環境、デプロイ先の結論構成は上です。
まぁこれまでかなりカオスな状況が続いたWeb業界でしたが、とりあえずプログラミングに関しては、軸となるスキルセットは見えています。JavaScriptだけでHTML&CSSをプログラミングするまでに来たからです。
すべてが無料で使えます。
Next.jsでもDBありきで構築すべきだろ？という疑問です。まぁ確かにHerokuのようなバックエンドを包括的に構築できるサーバーを使うのも当然アリです。
ただ、最終的に肝心なのは"スケーラビリティ"です。
そう考えるなら、バックエンドもパーツでしかなく、複雑になるデータのやり取りがシンプルになりさえすれば、APIで良いじゃんというのが最近の潮流です。
言いたいことは「構築時のお作法なんかどうでも良いから、さっさとWebサイトを立ち上げてしまおう。」ということです。どうせ後からいくらでもスクラップ&ビルドできた方が良いからです。
ということで、スピード感だけで言えば、Next.js ＆ Vercelで公開するのが最速です（対抗馬にVue.js & Nuxt.jsはありますが、まぁスルーで良いでしょう。）。
ということで、Vercelに公開したテストサイトが下記です。
所詮はハイパーテキスト、ネットにWEBサイトを公開できれば良いわけです。そして、あとはNext.jsで開発するだけとうことです。
Next.js 開発環境（実行環境）≒Node.jsの実行環境なので、nodenvをインストールしてセットアップすれば構築完了です。まぁ記事にするほどでもなく、一瞬で実行環境の構築が完了します。
がしかし、それを解説します。
Next.js 開発環境は「nodenvインストール」で構築完了！
さて、ここではnodenvのインストール手順を説明します。
まぁ、中にはnodebrewとnodenvの違いって何か？とか気になる方もいるかもしれませんが、とりあえず脳死でnodenvを入れてもらって大丈夫です。
※Next.jsの開発では、VS Code、Gitも使うのでインストールなり必要です。
インストール手順
- 前準備：Homebrewインストール
- ①anyenvインストール&設定
- ②anyenvを経由してnodenvインストール&設定
- ③nodenvにNode.jsをインストール
- ④VS Code、Gitインストール
anyenvを経由してnodenvをインストールする理由は、anyenvを入れておけば、Node.jsのバージョン管理の他にRuby、Pythonの環境を一元的に管理できるからです。
まぁ僕はanyenvにnodenvをインストールしましたが、Ruby、Pythonなんかで開発する気はないので、Homebrew上に直接nodenvをインストールしても良かったなと思っています。
さて、手順を解説していきます。
前準備：Homebrew をインストールする
Homebrewをインストールしておきましょう。Homebrewは、Macユーザーなら100%インストールするパッケージマネージャーです。
※すでにHomebrewをインストールしている方は読み飛ばして下さい。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"上のコマンドでインストールできます。
.zprofileにPATHを追加してくださいと表示されるので下のコマンドを実行します。
==> Next steps:
- Run these two commands in your terminal to add Homebrew to your PATH:
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ユーザー名/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
https://docs.brew.shbrew -vなどして.zprofileにPATHが追加されたのを確認すれば完了です。
Homebrewの基本的な使い方は下記を参考にして下さい。
① anyenvインストール&設定
% brew install anyenv
Running `brew update --auto-update`...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask).
==> New Formulae
ansible@6 cargo-deny lemmeknow protolint sniffnet stepci wikibase-cli
cargo-about dufs marksman prowler steampipe syft
==> New Casks
attachecase mail-assistant virtual-desktop-streamer
iconchanger menubarx vk-calls
interact-scratchpad readwise-ibooks youtype
You have 7 outdated formulae installed.
You can upgrade them with brew upgrade
or list them with brew outdated.
==> Fetching anyenv
==> Downloading https://ghcr.io/v2/homebrew/core/anyenv/manifests/1.1.5
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/anyenv/blobs/sha256:6fcafa1cbde4f24bb3e88597312c279ad4ad3
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:6fcafa1cbde4f24bb3e88
######################################################################## 100.0%
==> Pouring anyenv--1.1.5.arm64_ventura.bottle.tar.gz
🍺 /opt/homebrew/Cellar/anyenv/1.1.5: 23 files, 31.1KB
==> Running `brew cleanup anyenv`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).anyenv initをします。
失敗例
% anyenv init
# Load anyenv automatically by adding
# the following to ~/.zshrc:
eval "$(anyenv init -)"環境変数（.zsh）
% echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
% echo 'eval "$(anyenv init -)"' >> ~/.zshrc% anyenv install --init
Manifest directory doesn't exist: /Users/ユーザー名/.config/anyenv/anyenv-install
Do you want to checkout https://github.com/anyenv/anyenv-install.git? [y/N]: y
Cloning https://github.com/anyenv/anyenv-install.git master to /Users/ユーザー名/.config/anyenv/anyenv-install...
Cloning into '/Users/ユーザー名/.config/anyenv/anyenv-install'...
remote: Enumerating objects: 71, done.
remote: Counting objects: 100% (14/14), done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 71 (delta 4), reused 4 (delta 1), pack-reused 57
Receiving objects: 100% (71/71), 13.15 KiB | 3.29 MiB/s, done.
Resolving deltas: 100% (11/11), done.
Completed!② anyenvを経由してnodenvインストール&設定
% anyenv install nodenv
/var/folders/rj/6pgsdrrd5j5ds52vf9t7xm9r0000gn/T/nodenv.20221230160001.70075 ~
Cloning https://github.com/nodenv/nodenv.git master to nodenv...
Cloning into 'nodenv'...
remote: Enumerating objects: 4027, done.
remote: Counting objects: 100% (24/24), done.
remote: Compressing objects: 100% (22/22), done.
remote: Total 4027 (delta 6), reused 10 (delta 1), pack-reused 4003
Receiving objects: 100% (4027/4027), 734.46 KiB | 5.21 MiB/s, done.
Resolving deltas: 100% (2637/2637), done.
~
~/.anyenv/envs/nodenv/plugins ~
Cloning https://github.com/nodenv/node-build.git master to node-build...
Cloning into 'node-build'...
remote: Enumerating objects: 21660, done.
remote: Counting objects: 100% (1436/1436), done.
remote: Compressing objects: 100% (720/720), done.
remote: Total 21660 (delta 617), reused 1241 (delta 596), pack-reused 20224
Receiving objects: 100% (21660/21660), 3.89 MiB | 3.21 MiB/s, done.
Resolving deltas: 100% (13519/13519), done.
~
~/.anyenv/envs/nodenv/plugins ~
Cloning https://github.com/nodenv/nodenv-vars.git master to nodenv-vars...
Cloning into 'nodenv-vars'...
remote: Enumerating objects: 211, done.
remote: Total 211 (delta 0), reused 0 (delta 0), pack-reused 211
Receiving objects: 100% (211/211), 31.82 KiB | 1.99 MiB/s, done.
Resolving deltas: 100% (76/76), done.
~
Install nodenv succeeded!
Please reload your profile (exec $SHELL -l) or open a new session.Please reload your profile (exec $SHELL -l) or open a new session.とセッションをリロードしてくださいと教えてくれます。
なので、下記でセッションをリロードします。
% exec $SHELL -l③ nodenvにNode.jsをインストール
% nodenv install 19.3.0
Downloading node-v19.3.0-darwin-arm64.tar.gz...
-> https://nodejs.org/dist/v19.3.0/node-v19.3.0-darwin-arm64.tar.gz
Installing node-v19.3.0-darwin-arm64...
Installed node-v19.3.0-darwin-arm64 to /Users/ユーザー名/.anyenv/envs/nodenv/versions/19.3.0「nodenv」と「nodebrew」の違い
Next.js開発環境にはnodenvをお勧めします。
他の記事ではnodebrewをインストールする内容が多いです。同じNext.jsの開発環境とは言え、nodenvとnodebrewには違いがあります。
にほんブログ村
コメント