Ginza.jsでNext.jsをNetlifyで配信するLTをしてきた

2019/5/22にPlaidさんのオフィスで行われたGinza.js #1にLT枠で参加してきました。 前から、Plaidさんの会場は一面芝というのをTwitterで観測しており、今回初めてお邪魔させてもらいましたがすごかったです。 そのイベントに自分はLT枠で参加し、「Next.js meets Netlify」というNetlifyでNext.jsのSSRをする話をしてきました。

資料

話したこと

Netlifyの提供するFaasであるNetlify FunctionsでNext.jsのサーバーサイドレンダリング（SSR）を実現する話をしました。

Next.jsはv8でサーバーレスモードが追加され、サーバーレスでより使いやすくなりました。 サーバーレスモードを有効にすると単独で動作するファイルが生成されます。そのファイルをNetlify Functionsで動かします。

一方、Netlify FunctionsはURLの自由度が低く、example.com/.netlify/functions/funtion-nameのようなURLに固定されてしまいます。裏側のAPIとして利用する場合は気になりませんが、ユーザーがアクセスするURLとしては適していません。 しかし、Netlifyが用意しているリダイレクト・リライト機能を使えればURLを書き換えることができ、「/functions-nameにアクセスしたらexample.com/.netlify/functions/funtion-nameにリライトする」といったことも可能です。この手法で利用するURLのリライトを実現しました。

最後にNext.jsのビルドで得られた生成物をNetlify Functionsから利用します。このあたりは非常に煩雑になってしまったので、スライドを見てもらえれば…と思います。複雑なビルド手順と、Next.jsの要求する引数を無理やりマッピングで作る用の工夫を行っています。

一応言っておくと、Next.jsをNetlifyで動かすことは推奨しません。あくまで「Nelitfyの機能を使えばSSRもできる」ぐらいの認識でいた方がいいでしょう。

テーマ選びの話

最近は個人的にFirebaseでNext.jsのSSRを試しています。その話をしようと思ったのですが、既出ネタであることと他の参加者がNuxt.js x Firebaseの話をするということでNetlifyでSSRしたらどうだろうか？と思い立ちNext.js on Netlifyをテーマにしました。

自分はブログや技術書典でひたすらNetlifyやJAMstackの普及活動をしています。他のLTスピーカーの多くがデモのホスティングにNetlifyを利用したこともあり、Netlifyには一定の認知度があるとは思います。しかし、動的要素を配信できることはいまいち認知されていません。（みずりゅさんがNetlify Functionsに触れていたぐらいです。）

このLTを通して「Netlify、便利！」と思ってもらえればいいなと思います。