【Notion Blog】Next.jsとNode.jsのバージョンを最新にアップデート

NotionNotion Blog
Tomu Obata
📅2021/7/22

アップデートの際に気づいたこと・学びやちょっとした余談について書いています📝

はじめに

最近メンテナンス出来ていなかったので、本ブログのNext.jsとNode.jsのバージョンを上げました。

連休はまとまって作業できるので良いですね😄

Node.js とは | Node.js
Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 以下の「Hello World」の例では、たくさんの接続を同時に処理することができます。 各接続ごとにコールバックは発火され、何もすることがない場合、Node.js はスリープします。 これは OS のスレッドが採用されている一般的な同時実行モデルとは対照的です。 スレッドベースのネットワーキングは比較的非効率であり、使うのはとても困難です。 さらに Node.js にはロックがないので Node.js ユーザーはプロセスのデッドロックの悩みから開放されます。 ほとんどの Node.js の関数は I/O を直接実行しないため、プロセスをブロックしません。 ブロックしないのでスケーラブルなシステムを開発するのに Node.js はとても最適です。 この言葉だけでは不慣れな部分がいくつかあるかもしれません。 Blocking vs Non-Blocking にもう少し詳しい記事があります。 Node.js は Ruby の Event Machine や Python の Twisted のシステムに影響を受けていて、同様の設計です。 Node.js はランタイムコンストラクタの替わりにライブラリとして イベントループを提供し、さらに小さなイベントモデルを持ちます。 ほかのシステムではイベントループの開始時にブロッキングコールが常にあります。 典型的な例ではスクリプトの先頭で動作をコールバックを用いて定義し、 最後に EventMachine::run() のようなブロッキングコールでサーバを起動します。 Node.js ではそのようなイベントループを開始する呼び出しはありません。 Node.js は単純にスクリプトを実行した直後にイベントループが開始されます。 実行するコールバックがこれ以上ない場合に Node.js はイベントループから抜けます。 この動作はブラウザ上の JavaScript と似ています - イベントループはユーザからは隠されます。 HTTP はストリーミングと低遅延を念頭に置いて設計された Node.js の第一級オブジェクトです。 これにより Node.js は Web ライブラリやフレームワークの基礎を作るために適しています。 Node.js はスレッドがない設計をしているという理由だけで、複数コアの利点が得られないわけではありません。 通信しやすく設計された子プロセスは child_process.fork() API を使って生成できます。 コア上でロードバランシングを有効にするためにプロセス間でソケットを共有することを可能にする モジュールが同じインターフェース上に内蔵されています。

16系はLTS版(Long Term Supportの略で長期サポートされることが保証されている)のため、2021/07/22時点で最新バージョンに上げようと思い、16.5.0まで上げることにしました。

アップデートの際に気づいたこと, 学び

yarnでのアップデートは以下のコマンドで行います。

$ yarn upgrade --latest

buildするとバージョンアップに伴うエラーが出たので、1つずつ直していきます。

package.json, next.config.jsを変更した時は、「手元にキャッシュが残っておりVercelにデプロイした時と動作が異なる」などの問題を事前に防ぐため以下コマンドでデバッグを進めました。

$ rm -rf .next/
$ rm -rf node_modules/

$ yarn install
$ yarn run build

まず以下のようなエラーが出たので

💡
Error: The `unstable_revalidate` property is available for general use. Please use `revalidate` instead.

unstable_revalidateを使用している箇所をrevalidateに置き換えました

次に、Vercelserverlessであるため、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",

また、Next.js 11系はコンパイルのデフォルト設定としてWebpack5を採用しているためnext.config.jsで明示的に記述する必要はないため、その部分も書き換えました。

余談

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の画像を含むページ
Notionの画像を含むページ

現在もNotion Blogで用いられているデータ取得の方法が有効のため、以下のよう表示することが可能です👌

Notion Blogの動作例
Notion Blogの動作例

また、以前はNotion公式APIを使用するためのNode.js最低バージョンは14以上と書かれていたのですが

今確認すると、12以上でも動作するようになったらしいです。

しかしnotion-sdk-jsのアップデートなどで14未満は使えなくなる可能性も十分あるため、基本的には最新の安定版を使うようにしたいですね。

最近動作が不安定だった要因

以下の2点が主な要因です🙏

次はブログの安定化のために、負荷の多い部分から公式APIに置き換えるなどやっていけたらと思います。

最後までご覧いただきありがとうございました!

SHARE

スポンサーリンク