【Notion Blog】Next.jsとNode.jsのバージョンを最新にアップデート
アップデートの際に気づいたこと・学びやちょっとした余談について書いています📝
Next.js 9→11、Node.js 12→16へアップデート！yarn upgradeの実行方法、Vercelでの設定変更、webpack5対応、エラー修正の手順を詳しく解説。
はじめに
最近メンテナンス出来ていなかったので、本ブログのNext.jsとNode.jsのバージョンを上げました。
連休はまとまって作業できるので良いですね😄
- Next.js： →
- Node.js： →
16系はLTS版（Long Term Supportの略で長期サポートされることが保証されている）のため、2021/07/22時点で最新バージョンに上げようと思い、まで上げることにしました。
- Node.js 16について
- Node.js 16.5.0の変更差分
アップデートの際に気づいたこと, 学び
yarnでのアップデートは以下のコマンドで行います。
buildするとバージョンアップに伴うエラーが出たので、1つずつ直していきます。
package.json, next.config.jsを変更した時は、「手元にキャッシュが残っておりVercelにデプロイした時と動作が異なる」などの問題を事前に防ぐため以下コマンドでデバッグを進めました。
まず以下のようなエラーが出たので
Error: The `unstable_revalidate` property is available for general use.
Please use `revalidate` instead.
を使用している箇所をに置き換えました
Before：
After：
- Notion Blog内で対応する箇所
- 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以上でも動作するようになったらしいです。
最近動作が不安定だった要因
以下の2点が主な要因です🙏
- が変化しており、その更新が遅れてしまったこと
- ブログ一覧ページでLimitsを超過したリクエストを送っていたこと。
- この場合は、のエラーが表示されます。
次はブログの安定化のために、負荷の多い部分から公式APIに置き換えるなどやっていけたらと思います。
最後までご覧いただきありがとうございました！
署名2025/3/3 16:552025/4/1 23:47