UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Next.js】Next.js 12 のミドルウェアの話

Next.js12のミドルウェアに関するお話を聞いたのでメモ

なぜ脱Expressになる可能性があるのかが分かっていなかったが、説明を聞いた後はなるほどという状態になった

Next.js のミドルウェアとは

nextjs.org

ミドルウェアは、ユーザーが入力したリクエストに基づいて、レスポンスを書き換えたり、リダイレクトしたり、ヘッダーを追加したり、さらにはHTMLをストリーミングしたりして、レスポンスを修正することができる機能

Next.jsのミドルウェアはエッジランタイム(Cloudfare Workersのランタイムなど)でも使用することができるというのが特徴

ミドルウェアは標準のWebAPIを使用する

ドキュメントにさらっと書いてあるが、Next.jsのミドルウェア標準のWebAPIを使用するとのこと

これがかなり重要なことだった

標準のWebAPIとは以下のAPIのこと
https://developer.mozilla.org/ja/docs/Web/API

これまでのNext.jsのランタイムはNode.jsだけだったが、ミドルウェアの機能とともにCloudfare Workersのランタイムが増えたことにより、ミドルウェアで扱うAPIはWebAPIに統一することになった

新しい機能のNewStreaming SSRやRSCもミドルウェアで実装されているため、Next.jsではこれから「全てが標準Web APIを使う」ことになると言える

全てが標準Web APIになるということは、Node.js上でもWeb APIしか使えないということ

Node.js上でもWeb APIしか使えないと以下のことがおこる

  • Node.js上でもNode APIが見えない
  • Node.jsの標準モジュールをimportできない
  • 間接的に依存するモジュールも利用できない

知ってから、改めてドキュメントを読むとドキュメントにも書いてあった

nextjs.org

従来のNode.jsのランタイムで使われていたNodeAPIはSandboxというV8のContextでWebAPIを再現し、Adapterを介してミドルウェアで扱えるようにするとのことだが、原則使えないと考えた方がよさそう

これが結構インパクトあるというのがまず理解できた

getServerSideProps()やAPIルートの引数が変わる

全てが標準Web APIにということは、getServerSideProps()APIルートの引数も変更される

これまでgetServerSideProps()の引数の型はNode APIベースの型であったが、これがWebAPIの型を拡張した型になる

このとき、Web APIctx.reqctx.resは、Node APIreqresへの参照は持っていない

つまり、従来のExpressなどで設定した情報はWeb API側から参照できないことになり、付随してよく利用されるセッション情報や認証認可情報も利用できなくなる可能性がある

これより、脱Express、脱Node APIになるかもという話だった