Next.jsのChapter 1の通りにインストールするとエラーになる

Next.jsのChapter 1のインストール手順

Next.jsの公式サイトにはNext.jsを学習するためのページが用意されています。

Learn Next.js: Getting Started | Next.js

このページの最初のChapter 1には以下のコマンドでpnpmをインストールして、nextjs-dashboardの開発環境を作成するように最初に書かれています。

npm install -g pnpm

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

しかし、この手順でインストールすると、pnpm dev実行時にエラー(TypeError)が表示されます。

$ pnpm dev

> @ dev /Users/nextjs-dashboard
> next dev

 ⚠ Port 3000 is in use, trying 3001 instead.
  ▲ Next.js 15.0.0-canary.56
  - Local:        http://localhost:3000

 ✓ Starting...
 ⚠ Found lockfile missing swc dependencies, patching...
 ✓ Ready in 2.6s
 ⨯ Failed to patch lockfile, please try uninstalling and reinstalling next in this workspace
TypeError: Cannot read properties of undefined (reading 'os')
    at fetchPkgInfo (/Users/nextjs-dashboard/node_modules/.pnpm/next@15.0.0-canary.56_react-dom@19.0.0-rc-f38c22b244-20240704_react@19.0.0-rc-f38c22b244-20240704/node_modules/next/dist/lib/patch-incorrect-lockfile.js:73:25)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async patchIncorrectLockfile (/Users/nextjs-dashboard/node_modules/.pnpm/next@15.0.0-canary.56_react-dom@19.0.0-rc-f38c22b244-20240704_react@19.0.0-rc-f38c22b244-20240704/node_modules/next/dist/lib/patch-incorrect-lockfile.js:162:26)

Next.jsのChapter 1のエラーの解決方法

これは「Next.js 15.0.0-canary.56」がインストールされてしまうことが原因ですので、以下のコマンドで「Next.js 14.2.4」を入れ直せばエラーが表示されなくなります。

pnpm remove next
rm -rf node_modules
rm pnpm-lock.yaml
pnpm install next
pnpm install

pnpm dev

> @ dev /Users/nextjs-dashboard
> next dev

  ▲ Next.js 14.2.4
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.5s

Next.js 14.2.4は記事執筆時点のバージョンです。

バージョン14.x.xなら問題なく動作するので、同様のエラーが出たら記事に書かれた解決方法を試してみてください。

※ Chrpter 10からのPartial Pre-Rendering (PPR)はバージョン15以上が必要です。

Next.jsのChapter 1のインストール手順

Next.jsのChapter 1のエラーの解決方法

関連した記事