Next.js Codemods を使って Next.js 13 にアップグレードする
takeharak
このブログ を Upgrade Guide の Next.js Codemods でできる範囲まで Next.js 13 にアップグレードする
今回の環境
TL;DR
１. 念の為 Node バージョンを確認する (^v16.8)
node --version
v16.18.1
２．パッケージのアップデート
npm install next@latest react@latest react-dom@latest \
eslint-config-next@latest
added 11 packages, removed 2 packages, changed 12 packages, and
audited 627 packages in 11s
184 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
npm install -D eslint-config-next@latest
up to date, audited 627 packages in 782ms
184 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
npx -y @next/codemod@latest next-image-to-legacy-image ./pages
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
Executing command: jscodeshift --verbose=2 --ignore-pattern=**/node_modules/** --ignore-pattern=**/.next/** --extensions=tsx,ts,jsx,js --parser=tsx --transform /home/node/.npm/_npx/04c93779852ad6b7/node_modules/@next/codemod/transforms/next-image-to-legacy-image.js ./pages
Processing 4 files...
Spawning 4 workers...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
NOC pages/_app.tsx
NOC pages/[slug].tsx
NOC pages/_document.tsx
NOC pages/index.tsx
All done.
Results:
0 errors
4 unmodified
0 skipped
0 ok
Time elapsed: 0.707seconds
４．new-link
npx -y @next/codemod@latest new-link ./pages
Executing command: jscodeshift --verbose=2 --ignore-pattern=**/node_modules/** --ignore-pattern=**/.next/** --extensions=tsx,ts,jsx,js --parser=tsx --transform /home/node/.npm/_npx/04c93779852ad6b7/node_modules/@next/codemod/transforms/new-link.js ./pages
Processing 4 files...
Spawning 4 workers...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
NOC pages/_app.tsx
NOC pages/_document.tsx
OKK pages/index.tsx
OKK pages/[slug].tsx
All done.
Results:
0 errors
2 unmodified
0 skipped
2 ok
Time elapsed: 0.407seconds
５．ビルドしてみる
npm run build
> blog@0.1.0 build
> next build
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (18/18)
info - Finalizing page optimization
Route (pages) Size First Load JS
┌ ● / 2.21 kB 85.9 kB
├ /_app 0 B 74.6 kB
├ ● /[slug] (11073 ms) 1.98 kB 85.6 kB
├ └ css/853892cfe638c455.css 177 B
├ ├ /hello-world (630 ms)
├ └ [+15 more paths] (avg 522 ms)
└ ○ /404 181 B 74.8 kB
+ First Load JS shared by all 78.8 kB
├ chunks/framework-114634acb84f8baa.js 45.4 kB
├ chunks/main-1ec074d1ede6eb45.js 27.1 kB
├ chunks/pages/_app-1b0e468952a8f9ba.js 1.36 kB
├ chunks/webpack-9ba42dddc98d95a6.js 820 B
└ css/152c54f7e3b11f32.css 4.18 kB
○ (Static) automatically rendered as static HTML (uses no
initial props)
● (SSG) automatically generated as static HTML + JSON (uses
getStaticProps)