Next.js開発環境はnodebrewよりanyenv⇒nodenvで構築すること！

ふる

こんにちは！
慶應院卒田舎暮らしCTOです！
記事は信頼性ある内容を心がけています！
作成者は全部僕（プロフ）です。

@na65125038

黒き世界を統治せし大先生

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を使おうという方にとっては、あれこれ迷うことなく時短できる記事になっています。

ぜひ、ご参考ください。

スキル、開発環境、デプロイ先の結論構成（システム構成）

スキル、開発環境、デプロイ先の結論構成は上です。

まぁこれまでかなりカオスな状況が続いた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をインストールしても良かったなと思っています。

さて、手順を解説していきます。

Amazonランキング（家電・カメラ）

前準備：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.sh

brew -vなどして.zprofileにPATHが追加されたのを確認すれば完了です。

Homebrewの基本的な使い方は下記を参考にして下さい。

あわせて読みたい

M1・M2 MacにHomebrewを（アン）インストールする方法 引用：Homebrew この記事ではM1・M2 MacにHomebrewを導入する（（アン）インストールする）方法を紹介します。 ちなみにこの記事では 「M1・M2 Macでエンジニアスキルを...

② 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」と「nodebrew」の違い

Next.js開発環境にはnodenvをお勧めします。

他の記事ではnodebrewをインストールする内容が多いです。同じNext.jsの開発環境とは言え、nodenvとnodebrewには違いがあります。