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!
tips

Google Chromeスクショ術

技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。 同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。 > C

chrome
event

技書博で「SlackApps開発ガイド」を頒布します

7/27に大田区産業プラザPiOで行われる技術書同人誌博覧会(技書博)に「つのぶえ出版」としてサークル参加します。 今まで「つのぶえ出版」としてはGatsbyとNetlifyの本を4冊だしていまし

dev

Next.js 9からTypeScriptの利用方法が変わるのでまとめてみた

ZEIT社が開発しているReact製のフレームワークNext.jsですが、現在v.8.1.1のカナリー版がリリースされています。 v.9では様々な変更が入っていますが、個人的に注目しているのはTyp