Next.jsの公式チュートリアルをやっていてPartial Prerendering (PPR) を使いました
ただ、ビルドするとエラーになったので調べてみます
2024/07時点でPPRは試験的に採用されているのでそれが関係していそう。。
ちなみに、公式チュートリアルをやってみた記事は↓です
現状
・バージョン
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 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に関係あるコードのみ追記します
|
1 2 3 4 5 6 7 8 9 10 |
/** @type {import('next').NextConfig} */ const nextConfig = { experimental: { // true: すべてのページでPPRが使える // incremental: 特定のページでPPRが使える ppr: 'incremental', }, }; module.exports = nextConfig; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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> ); } |
エラー文
ビルドすると、、、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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) |
公式ドキュメントにお世話になる
Partial Prerendering Preview in Next.js Canary
nextjs.org
↑の記事を見るように書いてあるので、見てみると
PPRを使うにはNext.jsのCanaryバージョンが必須となっているとのこと。
試験的に導入されている機能なので最新バージョンを使わなければならないそう。
いざ、解決
先ほどのドキュメントに沿ってNext.jsのCanaryバージョンをインストールします
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
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バージョンが入るはず。。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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 で無理やり入れます
このオプション何？？ という方は↓の記事をご覧ください
npm installでのCould not resolve dependencyエラーと--legacy-peer-depsについて
zenn.dev
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// 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 |
再度、ビルドしてみる
なんとか環境が整ったので再度ビルドしてみます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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の順にバージョンを戻していきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
// 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", |
これでバージョンが戻りました！
コメント