Next.js13から14にアップデート

本ブログのNext.jsのバージョンを13から14系にアップデートしました。

特に詰まったことがなかったのですが、一応記録として残しています。

15系のアップデートは追って対応する予定です。

Package.jsonを編集

{
  "name": "my-blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --dir src",
    "lint:fix": "npm run lint --fix",
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"
  },
  "dependencies": {
    "@notionhq/client": "^2.2.3",
    "@types/node": "18.14.4",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "axios": "^1.3.4",
    "encoding": "^0.1.13",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.3",
    "next": "^13.4.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-syntax-highlighter": "^15.5.0",
    "sharp": "^0.32.0",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "@types/react-syntax-highlighter": "^15.5.6",
    "autoprefixer": "^10.4.14",
    "eslint-config-prettier": "^8.6.0",
    "postcss": "^8.4.24",
    "prettier": "^2.8.4",
    "tailwindcss": "^3.3.2"
  }
}

  "dependencies": {
    ~~ 省略 ~~
    "next": "^14.0.0",
    ~~ 省略 ~~

14系を指定して npm i を実行。

node_modules package-lock.json を再構築

$ npm ci

added 406 packages, and audited 407 packages in 5s

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

7 vulnerabilities (2 moderate, 5 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

npm ciを実行するとパッケージの依存関係に問題があるため、node_modules package-lock.json を削除し再度下記をnpm ciを実行

rm -rf node_modules package-lock.json 
npm i

$ npm i

up to date, audited 464 packages in 584ms

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

found 0 vulnerabilities

無事依存関係のエラーを解消!!

やらなかったこと

DeprecationWarning: The punycode module is deprecated エラーについては今回対応してしませんでした。

(node:19382) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

ネット上で見つけた対策としては、nodeのバージョンを20系にダウングレードする方法でした。ただ現状動作に支障がないため、今回は対応していません。

※ちなみに、eslintライブラリが関連していそうだったので、eslintを8から9系にアップデートしたが解消せず。

$ npm ls punycode
my-blog@0.1.0 /Users/aguru-itabashi/Desktop/Gloves_Blog
└─┬ eslint@8.35.0
  └─┬ ajv@6.12.6
    └─┬ uri-js@4.4.1
      └── punycode@2.3.0

Next.js15へのアップデートに向けて

キャッシュに関して大きな変更点がありそうです。

• Next.js14：基本的にフェッチされたデータはキャッシュされる。
• Next.js 15：フェッチされたデータはキャッシュされない。

export const dynamic = 'force-dynamic';

の定義がNext.js15では必要なくなりそうです。