mottox2 blog

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

eventltnetlifyreactnextjs

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、便利!」と思ってもらえればいいなと思います。

B!
dev

CLIで利用するNode.jsの書き捨てプログラムを作成するコツ

プログラマーであれば単純作業をプログラムに任せると思います。今回は備忘録を兼ねてNode.jsで書き捨て前提のプログラムを書く際に、よく使っているテクニックをまとめてみました。 やっていることは同じ

nodejs
tool

おしゃれなコード画像を生成するCLIツール『Silicon』

自分はLT資料を作る際に、『Carbon』というおしゃれなコード画像を生成するWebサービスを利用しています。今回はCarbonをインスパイアした『Silicon』というRust製のCLIツールを発見

toolrust
event

「技術書同人誌博覧会」にサークル参加してきた

2019/07/27に大田区産業プラザPioで開催された技術書同人誌博覧会(通称「技書博」)にサークル参加してきました。 「ブログを書くまでがイベント」ということですので、新刊の話、次回の新刊、当日

技術同人誌