Zenn
📚

【Next.js】Partial Prerendering (PPR) をつかうとビルドができない！！？

2025/01/05に公開
Next.js
tech

Next.js の公式チュートリアルをやっていて**Partial Prerendering (PPR)**を使いました

ただ、ビルドするとエラーになったので調べてみます

2024/07 時点で PPR は試験的に採用されているのでそれが関係していそう。。

ちなみに、公式チュートリアルをやってみた記事は ↓ です
https://hisuiblog.com/nextjs-tutorial-10/

現状

・バージョン

// Node
nextjs-dashboard$ node -v
v18.17.1

// Next.js
nextjs-dashboard$ grep \"next\" package.json
    "next": "^14.0.2",

// React
nextjs-dashboard$ grep -e \"react\" -e \"react-dom\" package.json
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

・コード

PPR に関係あるコードのみ追記します

next.config.js
/**@type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // true: すべてのページでPPRが使える
    // incremental: 特定のページでPPRが使える
    ppr: 'incremental',
  },
};

module.exports = nextConfig;


import SideNav from '@/app/ui/dashboard/sidenav';

export const experimental_ppr = true;

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

エラー文

ビルドすると、、、

nextjs-dashboard$ npm run build

> build
> next build

 ⚠ Invalid next.config.js options detected:
 ⚠     Expected boolean, received string at "experimental.ppr"
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config

> Build error occurred
Error: The experimental.ppr preview feature can only be enabled when using the latest canary version of Next.js. See more info here: https://nextjs.org/docs/messages/ppr-preview
    at assignDefaults (/mnt/c/Users/******/Desktop/development/Learning/JavaScript/NextJS/tutorial/nextjs-dashboard/node_modules/next/dist/server/config.js:258:15)
    at loadConfig (/mnt/c/Users/******/Desktop/development/Learning/JavaScript/NextJS/tutorial/nextjs-dashboard/node_modules/next/dist/server/config.js:760:32)
    at async Span.traceAsyncFn (/mnt/c/Users/******/Desktop/development/Learning/JavaScript/NextJS/tutorial/nextjs-dashboard/node_modules/next/dist/trace/trace.js:140:20)
    at async /mnt/c/Users/******/Desktop/development/Learning/JavaScript/NextJS/tutorial/nextjs-dashboard/node_modules/next/dist/build/index.js:192:28
    at async Span.traceAsyncFn (/mnt/c/Users/******/Desktop/development/Learning/JavaScript/NextJS/tutorial/nextjs-dashboard/node_modules/next/dist/trace/trace.js:140:20)
    at async build (/mnt/c/Users/******/Desktop/development/Learning/JavaScript/NextJS/tutorial/nextjs-dashboard/node_modules/next/dist/build/index.js:187:29)
    at async main (/mnt/c/Users/******/Desktop/development/Learning/JavaScript/NextJS/tutorial/nextjs-dashboard/node_modules/next/dist/bin/next:150:5)

公式ドキュメントにお世話になる

https://nextjs.org/docs/messages/ppr-preview

↑ の記事を見るように書いてあるので、見てみると

PPR を使うには Next.js の Canary バージョンが必須となっているとのこと。

試験的に導入されている機能なので最新バージョンを使わなければならないそう。

いざ、解決

先ほどのドキュメントに沿ってNext.js の Canary バージョンをインストールします

nextjs-dashboard$ npm install next@canary
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: undefined@undefined
npm error Found: react@18.2.0
npm error node_modules/react
npm error   react@"18.2.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"19.0.0-rc.0" from next@15.0.0-canary.58
npm error node_modules/next
npm error   next@"15.0.0-canary.58" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/*******/.npm/_logs/2024-07-08T12_46_40_373Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/*******/.npm/_logs/2024-07-08T12_46_40_373Z-debug-0.log

はい、エラー出ました。

ハイライト部あたりを見ると、

君の使ってる React は 18.2.0 だけど、19.0.0 が必要だよー

とでているので React のバージョンをあげます。

こちらも公式ドキュメントがあったのでそれに沿ってバージョンアップ

https://ja.react.dev/blog/2024/04/25/react-19-upgrade-guide

nextjs-dashboard$ npm install --save-exact react@rc react-dom@rc
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react@18.2.0
npm warn node_modules/react
npm warn   peer react@">= 16" from @heroicons/react@2.0.18
npm warn   node_modules/@heroicons/react
npm warn     @heroicons/react@"^2.0.18" from the root project
npm warn   4 more (next, react-dom, styled-jsx, the root project)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@">= 16" from @heroicons/react@2.0.18
npm warn node_modules/@heroicons/react
npm warn   @heroicons/react@"^2.0.18" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react@18.2.0
npm warn node_modules/react
npm warn   peer react@">= 16" from @heroicons/react@2.0.18
npm warn   node_modules/@heroicons/react
npm warn     @heroicons/react@"^2.0.18" from the root project
npm warn   4 more (next, react-dom, styled-jsx, the root project)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^18.2.0" from next@14.0.2
npm warn node_modules/next
npm warn   next@"^14.0.2" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react@18.2.0
npm warn node_modules/react
npm warn   peer react@">= 16" from @heroicons/react@2.0.18
npm warn   node_modules/@heroicons/react
npm warn     @heroicons/react@"^2.0.18" from the root project
npm warn   4 more (next, react-dom, styled-jsx, the root project)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^18.2.0" from react-dom@18.2.0
npm warn node_modules/react-dom
npm warn   peer react-dom@"^18.2.0" from next@14.0.2
npm warn   node_modules/next
npm warn   1 more (the root project)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react-dom@18.2.0
npm warn node_modules/react-dom
npm warn   peer react-dom@"^18.2.0" from next@14.0.2
npm warn   node_modules/next
npm warn     next@"^14.0.2" from the root project
npm warn   1 more (the root project)
npm warn
npm warn Could not resolve dependency:
npm warn peer react-dom@"^18.2.0" from next@14.0.2
npm warn node_modules/next
npm warn   next@"^14.0.2" from the root project
npm warn ERESOLVE overriding peer dependency

added 1 package, removed 1 package, changed 3 packages, and audited 574 packages in 5s

172 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (1 moderate, 4 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

なにやら Warning がたくさん出ましたが、バージョンアップできたので次へ

これで Next.js の Canary バージョンが入るはず。。

nextjs-dashboard$ npm install next@canary
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: undefined@undefined
npm error Found: react@19.0.0-rc-f38c22b244-20240704
npm error node_modules/react
npm error   react@"19.0.0-rc-f38c22b244-20240704" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"19.0.0-rc.0" from next@15.0.0-canary.58
npm error node_modules/next
npm error   next@"15.0.0-canary.58" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/******/.npm/_logs/2024-07-08T12_56_48_991Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/******/.npm/_logs/2024-07-08T12_56_48_991Z-debug-0.log

React19.0.0 がはいっているのでこのエラーが出ているのがよくわかりません。。

今回は試験的に Canary バージョンを入れるので --legacy-peer-deps で無理やり入れます

このオプション何？？　という方は ↓ の記事をご覧ください

https://zenn.dev/minamiso/articles/78b22716f3338d#--legacy-peer-depsとは

nextjs-dashboard$ npm install next@canary  --legacy-peer-deps
npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE   package: 'next@15.0.0-canary.58',
npm warn EBADENGINE   required: { node: '>=18.18.0' },
npm warn EBADENGINE   current: { node: 'v18.17.1', npm: '10.8.1' }
npm warn EBADENGINE }

added 8 packages, removed 6 packages, changed 8 packages, and audited 575 packages in 40s

175 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (1 moderate, 3 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.


nextjs-dashboard$ npm run build

> build
> next build

You are using Node.js 18.17.1. For Next.js, Node.js version >= v18.18.0 is required.

何とか Canary バージョンになりましたが、今度は Node.js のバージョンが低いみたい

試しにビルドしてみても同じようなメッセージが出ます。

ここからは ↓ を参考にNode.js のバージョンを 18.18.0 以上にあげます

https://qiita.com/siakio/items/99817fc98c633bd3fd21

// nのインストール
nextjs-dashboard$ sudo npm install -g n
[sudo] password for ********:

added 1 package in 473ms


// Node.jsの安定版のバージョンを確認
// 18.18.0以上なので安定版でOK
nextjs-dashboard$ n --stable
20.15.0


//Node.jsの安定板をインストール
nextjs-dashboard$ sudo n stable
  installing : node-v20.15.0
       mkdir : /usr/local/n/versions/node/20.15.0
       fetch : https://nodejs.org/dist/v20.15.0/node-v20.15.0-linux-x64.tar.xz
     copying : node/20.15.0
   installed : v20.15.0 (with npm 10.7.0)

Note: the node command changed location and the old location may be remembered in your current shell.
         old : /usr/bin/node
         new : /usr/local/bin/node
If "node --version" shows the old version then start a new shell, or reset the location hash with:
hash -r  (for bash, zsh, ash, dash, and ksh)
rehash   (for csh and tcsh)


// Node.jsのバージョン確認
// ターミナルを立ち上げなおさないとバージョン上げる前のものが表示される
nextjs-dashboard$ node -v
v18.17.1


// ターミナル立ち上げなおしてバージョン確認
nextjs-dashboard$ node -v
v20.15.0

再度、ビルドしてみる

なんとか環境が整ったので再度ビルドしてみます

nextjs-dashboard$ npm run build

> build
> next build

  ▲ Next.js 15.0.0-canary.58
  - Environments: .env
  - Experiments (use with caution):
    · ppr

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (7/7)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    229 B           104 kB
├ ○ /_not-found                          895 B          91.3 kB
├ ◐ /dashboard                           302 B          95.8 kB
├ ○ /dashboard/customers                 142 B          90.5 kB
└ ○ /dashboard/invoices                  142 B          90.5 kB
+ First Load JS shared by all            90.4 kB
  ├ chunks/440-9e545f86aac8f1b5.js       36.4 kB
  ├ chunks/f5e865f6-62384e348f14a4cc.js  52.1 kB
  └ other shared chunks (total)          1.92 kB


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

無事ビルドできましたー

Next.js と React のバージョンを戻す

Next.js と React を最新のバージョンにしました。

が、試験的なバージョンなので元のバージョンに戻しておきます

Next.js から戻すと React が最新すぎて互換性がなくなるので

React⇒Next.js の順にバージョンを戻していきます

// Reactを18.2.0へ
nextjs-dashboard$ npm install react@18.2.0 react-dom@18.2.0
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react@19.0.0-rc-f38c22b244-20240704
npm warn node_modules/react
npm warn   peer react@"19.0.0-rc-f38c22b244-20240704" from react-dom@19.0.0-rc-f38c22b244-20240704
npm warn   node_modules/react-dom
npm warn     react-dom@"18.2.0" from the root project
npm warn   2 more (styled-jsx, the root project)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"19.0.0-rc.0" from next@15.0.0-canary.58
npm warn node_modules/next
npm warn   next@"^15.0.0-canary.58" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react-dom@19.0.0-rc-f38c22b244-20240704
npm warn node_modules/react-dom
npm warn   react-dom@"18.2.0" from the root project
npm warn
npm warn Could not resolve dependency:
npm warn peer react-dom@"19.0.0-rc.0" from next@15.0.0-canary.58
npm warn node_modules/next
npm warn   next@"^15.0.0-canary.58" from the root project

added 3 packages, changed 3 packages, and audited 578 packages in 6s

177 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (1 moderate, 3 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.


// Next.jsを14.0.2へ
nextjs-dashboard$ npm install next@14.0.2

added 2 packages, removed 9 packages, changed 6 packages, and audited 570 packages in 33s

172 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (1 moderate, 4 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.


// バージョンがもどったか確認
nextjs-dashboard$ grep -e \"react\" -e \"react-dom\" package.json
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
nextjs-dashboard$ grep \"next\" package.json
    "next": "^14.0.2",

これでバージョンが戻りました！

Discussion