【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に置き換えるなどやっていけたらと思います。
最後までご覧いただきありがとうございました！
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア
東京を拠点に、アプリ開発・新規事業立ち上げ・ブランドづくりに取り組んでいます。
2021年にサイバーエージェントへ新卒入社後、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
🎯 Mission｜人の挑戦を加速する仕組みをつくる
── アイデアを形にし、前に進める“土台”や“場”を共創する
📌 「リアルな場 × デジタル」の可能性を探求し、新しい挑戦が生まれる土壌を育てる
🔹 エンジニアリング × ビジネスの視点から、アイデアを形にし、成長を支えていく
🔹 実店舗オーナーを目指し、オーダースーツ・ドライヘッドスパ・セレクトショップの複合店舗の立ち上げにも挑戦中
👥 特に、社会人1〜5年目くらいで
「やりたい気持ちはあるけど、最初の一歩に迷っている」方へ。
「自分の可能性をもっと広げたい」
「モヤっとしたアイデアがあるけど、どう進めていいかわからない」
そんなフェーズにいる方と、一緒に考えたり、手を動かしたりできたら嬉しいです。
🌱 「挑戦したい20代」との出会いも、大切にしています。
「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌
🌐 詳しいプロフィールはこちら
https://obata-tomu.jp/