はじめに
今回は、業務で検証用のアプリの雛形作成をサクッと行いたいなと思い、パッケージのインストールや依存関係の解決が高速(と言われている)voltaとpnpmを使ってNext.js14のプロジェクト作成の手順を備忘録としてまとめました
新規プロジェクト作成
npx create-next-app@latest
# バージョン指定する場合
npx create-next-app@14.2.3
- Nextのバージョン確認
npx next --version
volta導入
参考記事: Node.jsのバージョン管理にVoltaを推したい - Qiita
- JavaScript ツールマネージャー (node.js, npm, yarn のバージョン管理も行うことができる)
- Rust 製であるため、他のバージョン管理ツール(yarn, npm etc.)より動作が高速
- Node.js のバージョンは基本的に LTS(偶数)年度のものを採用
brew install volta
- voltaのパス設定
- システムがvoltaコマンドを認識できるようにする
-
$HOME/.volta/binをPATH環境変数に追加- PATHとは、システムがコマンドを探す場所のリスト
- これにより、voltaとそれを通じてインストールされたpnpmのバイナリファイルがある場所をシステムに教えている
export PATH="$HOME/.volta/bin:$PATH"
-
.zshrcの再読み込み
source ~/.zshrc
- voltaのバージョン確認
volta -v
- Node.js のグローバルデフォルトバージョンを設定する
volta install node
# バージョン指定する場合
volta install node@20.13.1
- プロジェクトで使用する Node.js のバージョンを固定する
volta pin node
# バージョン指定する場合
volta pin node@20.13.1
- nodeのバージョン確認
node -v
pnpm導入 (performant npm)
-
npm, yarn と並ぶ JS のパッケージマネージャー
-
他と比べてインストールなどの動作が高速
- pnpmは、すべてのパッケージをグローバルストアに保存するので、各プロジェクトは、必要なパッケージへのハードリンクまたはシンボリックリンクを持つことにより、以下の2点のメリットが享受できる
- 同じパッケージが複数のプロジェクトで使用されても、1つのコピーだけが保存されるのでディスク容量が節約される
- 新しいパッケージをダウンロードする代わりに既存のパッケージへのリンクを作成するだけで済む
- また、npmやyarnは、依存関係をフラットに解決しようとして時間がかかりますが、pnpmは階層的な構造をしており、各パッケージ毎に
node_modulesフォルダを持ち、意図しない依存関係の使用を防いでくれる
- pnpmは、すべてのパッケージをグローバルストアに保存するので、各プロジェクトは、必要なパッケージへのハードリンクまたはシンボリックリンクを持つことにより、以下の2点のメリットが享受できる
-
pnpm を導入した場合、
package-lock.jsonの代わりにpnpm-lock.yamlというファイルを使用する -
上記手順でNodeのデフォルトバージョンをインストール後、pnpm をインストール
追記
以下の記事によると、パッケージマネージャーの中でyarn v4がおそらく最速みたいですね！
volta install pnpm
# バージョン指定する場合
volta install pnpm@9.6.0
- プロジェクトの依存関係を pnpm を使ってインストール
-
package.jsonに記載されている依存関係を確認し、必要なパッケージをpnpmのグローバルストアからリンクするorダウンロードする - pnpm-lock.yamlファイルを生成
- 正確なバージョン情報と依存関係のツリーを記録して、再現可能なインストールを保証
- pnpmの特徴
- ディスク空間の節約
- インストールの高速化
- ->パッケージを一度だけダウンロードして、プロジェクト間で共有する為
-
pnpm install
- サーバー起動
pnpm run dev
ESLint/Prettierの追加
※今回CSSフレームワークにTailwindCSSを使用しています
pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss
参考記事