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

  • URLをコピーしました!
このエントリーをはてなブックマークに追加
Next.js ロゴ①
Next.js ロゴ①
ふる
ふる

こんにちは!「ふる(プロフィール詳細)」です。 

 

記事は信頼性ある内容を心がけています。

  • IT専門
  • 宅建士、行政書士資格保有
  • 体組成計"プロアスリート"認定

@na65125038

MOMOHUKU(ふる)
 

MOMOHUKU - にほんブログ村

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&CSSVS CodeVercelDB
Supabase
JavaScriptGitCMS
Sanity
Next.js
(React、Node.js)
nodenvCDN
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インストール」で構築完了!

Next.js ロゴ②
Next.js ロゴ②

さて、ここでは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

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の基本的な使い方は下記を参考にして下さい。

① 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には違いがあります。

Amazon最新ランキング(コミック)

Amazon 最新ランキング(フィギュア)

【記事PR】M1・M2 MacをゲーミングPC化する!Apexでゲーム配信しよう!

M1・M2 MacでもGeForce NOWならApexが起動する!
M1・M2 MacでもGeForce NOWならApexが起動する!

M1・M2 Macでゲーム配信しないのは「勿体ない」です。

M1・M2 Macは思っている以上に何でもできるハイスペックマシンだからです。

しかし、ほとんどのFPSゲームには、必ず「WindowsゲーミングPC」が必要になります。

ただ、これからはM1・M2 Macでゲームするのが普通です。

なぜなら、今後、ゲーミングPCは「クラウドGPUの時代」だからです。

GeForce NOWには無料のフリープランがあるので、とりあえず、試しにM1・M2 MacをWindowsゲーミングPC化できます。

今後、ますます「ゲーム配信」が活発になります。

GeForce NOWを使えば、母艦(M1・M2 Mac)のスペックなんか関係ないからです。

GeForce NOWなら「高額で巨大グラボ」が無くても、Windowsゲームが出来るわけです。

M1・M2 Macで「ゲーム配信」をするのをオススメします。

Amazon 最新ランキング(フィギュア)

「Bizarre」ゲームストリーミングチーム!

Bizarreメンバー:明楽十愛

「Bizarre」への参加・脱退は「Twitterのブロック解除」なみに簡単です。
「Bizarre」よくあるご質問も読んで見て下さい。

Amazon最新ランキング(コミック)

コメント

コメントする

目次