Next.jsとNode.jsのバージョンを最新にアップデートした話
アップデートの際に気づいたこと・学びやちょっとした余談について書いています📝
Next.js 9→11、Node.js 12→16へアップデート！yarn upgradeの実行方法、Vercelでの設定変更、webpack5対応、エラー修正の手順を詳しく解説。
はじめに
最近メンテナンス出来ていなかったので、本ブログのNext.jsとNode.jsのバージョンを上げました。
連休はまとまって作業できるので良いですね😄
- Next.js：
9.4.4→11.0.1
- Node.js：
12.22.3→16.5.0
16系はLTS版（Long Term Supportの略で長期サポートされることが保証されている）のため、2021/07/22時点で最新バージョンに上げようと思い、16.5.0まで上げることにしました。
- Node.js 16について
- Node.js 16.5.0の変更差分
アップデートの際に気づいたこと, 学び
yarnでのアップデートは以下のコマンドで行います。
$ yarn upgrade --latestbuildするとバージョンアップに伴うエラーが出たので、1つずつ直していきます。
package.json,next.config.jsを変更した時は、「手元にキャッシュが残っておりVercelにデプロイした時と動作が異なる」などの問題を事前に防ぐため以下コマンドでデバッグを進めました。
$ rm -rf .next/
$ rm -rf node_modules/
$ yarn install
$ yarn run buildまず以下のようなエラーが出たので
unstable_revalidateを使用している箇所をrevalidateに置き換えました
次に、Vercelはserverlessであるため、package.jsonのbuild-rss.jsを参照する箇所を以下のように修正しました。
Before：
"build": "next build && node .next/server/build-rss.js",After：
"build": "next build",
"build:rss": "node ./.next/serverless/scripts/build-rss.js",- Notion Blog内で対応する箇所
また、Next.js 11系はコンパイルのデフォルト設定としてWebpack5を採用しているためnext.config.jsで明示的に記述する必要はないため、その部分も書き換えました。
- Notion Blog内で対応する箇所
余談
Notion公式APIについて
公式APIが出ていますが、現時点ではテキストのようなブロックタイプのみ対応しており、画像などの形式はサポートされていません。
Only text-like blocks are currently available. At present the API only supports text-like block types which are listed in the reference below. All other block types will continue to appear in the structure, but only contain a type set to "unsupported".
しかし、画像を含むページは
現在もNotion Blogで用いられているデータ取得の方法が有効のため、以下のよう表示することが可能です👌
また、以前はNotion公式APIを使用するためのNode.js最低バージョンは14以上と書かれていたのですが
今確認すると、12以上でも動作するようになったらしいです。
しかしnotion-sdk-jsのアップデートなどで14未満は使えなくなる可能性も十分あるため、基本的には最新の安定版を使うようにしたいですね。
最近動作が不安定だった要因
以下の2点が主な要因です🙏
NOTION_TOKENが変化しており、その更新が遅れてしまったこと- ブログ一覧ページでLimitsを超過したリクエストを送っていたこと。
- この場合は、
Failed to load Notion posts, attempting to auto create tableのエラーが表示されます。
- この場合は、
次はブログの安定化のために、負荷の多い部分から公式APIに置き換えるなどやっていけたらと思います。
最後までご覧いただきありがとうございました！