Tech Blog

Next.js Codemods を使って Next.js 13 にアップグレードする

Cover Image for Next.js Codemods を使って Next.js 13 にアップグレードする

弊社の Tech Blog を 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

３．next-image-to-legacy-image

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)

参考にしたページ