🐙

npmで作ったNext.jsをpnpm化【Github Pages対応】

2025/01/20に公開

npmからpnpmへの移行方法
何も考えずにnpmで作ってしまったNext.jsのプロジェクトをpnpm化しました
pnpmの方が速いです

Github PagesにデプロイするGithub Actionsのワークフローもpnpm対応させます

https://github.com/giana12th/turntalker

pnpm移行

pnpmのインストール

pnpmをインストールします

pnpmのインストール
npm install -g pnpm

npmのパッケージ削除

node_modulesをフォルダごと削除します
package-lock.jsonファイルを削除します

パッケージマネージャの設定

パッケージマネージャとしてnpmを使わないように
pnpmによるインストールだけを許可する設定をpackage.jsonに追記します

package.json
"scripts": {
        "preinstall": "npx only-allow pnpm",

パッケージの再インストール

pnpmを使ってインストールします

パッケージのインストール
pnpm install

node_modulesフォルダが帰ってきて
pnpm-lock.yamlファイルが生成されます

動作確認

アプリが動くか確認します

動作確認
pnpm dev

http://localhost:3000/にアクセスして表示を確認します

プロジェクトのpnpm化ができました

Github Actions変更

github提供のNext.js用ワークフローはpnpmに対応していません
インストールやビルドにpnpmを使うように変更します

Detect package manager削除

pnpmを検出してくれないので削除します

.github/workflows/nextjs.yml
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          fi

manager, command, runnerの定義が無くなるので
それぞれを直接pnpm用に書き換えます

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
-         cache: ${{ steps.detect-package-manager.outputs.manager }}
+         cache: pnpm

      - name: Install dependencies
-       run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+       run: pnpm install

      - name: Build with Next.js
-       run: ${{ steps.detect-package-manager.outputs.runner }} next build
+       run: pnpm next build

キャッシュ用の設定を追加

pnpm/action-setupを追加します

        steps:
            - name: Checkout
              uses: actions/checkout@v4
+           - uses: pnpm/action-setup@v4
+             name: Install pnpm
+             with:
+                 version: 10
+                 run_install: false
            - name: Setup Node
              uses: actions/setup-node@v4
              with:
                  node-version: '20'
                  cache: pnpm

https://github.com/pnpm/action-setup/blob/master/README.md?form=MG0AV3#use-cache-to-reduce-installation-time

動作確認

mainブランチに変更をプッシュしてGithub Pagesにデプロイされることを確認します

以上でnpmからpnpmへの移行は終わりです
お疲れ様でした

Discussion