Skip to main content

Next.js

Next.js について​

Next.js は React のフレームワークの１つで、独特なキャッシュシステムやルーティングがあります。

開発元はVercelなので、サポートなどが安定している側面などがありますが、 一方で、会社の都合で機能が追加されたり削除されるので、利用者が振り回される側面もあります。

Next.jsは実運用を加味した構成になっており、 「画像の圧縮 」、「SSR」、「SSG」をサポートしてたりと、 React単体で動かすのとは異なる機能が提供されています。

準備​

mise​

Reactの開発速度は早く、それに合わせてnode.jsのバージョンを頻繁に上げることになります。 Mac OSに標準にインストールされているnodeはそう意味では、使い勝手が悪いです。 また、brewで直接インストールしたNode.jsを使うのも、 複数のプロジェクトを運用する際に、バージョン互換の問題が発生してしまいます。 各プロジェクトで異なるバージョンのNode.jsが利用できるよう、miseを使っていきましょう。

miseは2024年末現在、新しいめのプログラミング言語バージョン管理ソフトです。 まずは、下のコマンドで mise をインストールします。

brew install mise

インストールが終わったら~/.zshrcを開き、下の設定を加えます。

if command -v mise 1>/dev/null 2>&1; then
  eval "$(mise activate --shims)"
fi

保存したら、別のターミナルのウィンドウを開いて、インストールが可能なnodeのバージョンを確認します。

mise ls-remote node

Node.js​

インストールするnodeのバージョンはNext.jsが要求しているバージョン以上にしましょう。

こちらのリンクから確認できます。 2025/01/02 現在ではNode.js 18.18 or later.となっています。

https://nextjs.org/docs/app/getting-started/installation

同時に、reactがサポートしているnodeバージョンも見ておきます。

https://github.com/facebook/react/blob/main/package.json

最新は16から22系統までサポートされている様です。

 "devEngines": {
    "node": "16.x || 18.x || 20.x || 22.x"
  },

next.jsが18.18以上なので、22系統の最新版をmiseでインストールします。

mise use -g node@22.12.0

インストールが終わったら、nodeコマンドを打ち込み最新版がインストールされているか確認します。

node -v

pnpm​

pnpmはnpmの様にnode.jsパッケージのインストール管理を行うものです。 npm よりも高速で便利なことから近年ではこちらを利用するケースが増えています。

npm install -g pnpm