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

WordPressをSifterでホスティングする際の検討メモ

Shifterは株式会社デジタルキューブ が運営する「Serverless Static WordPress ホスティング」と銘打っているサービスです。 通常用途でWordPressをする際は常

shifterwordpress
tips

Production modeでもVue.js Devtoolsを有効にする方法

今年のWWDCは熱かったですね!その中でもSwiftでReactのように宣言的にUIを記述できるSwiftUIの発表はこれからのiOSアプリに変革をもたらす存在だと思います。 そのSwiftUIの

chromevue
event

『初夏のJavaScript祭』でSPAのSSR, SSGについて話してきました

メンバーズキャリアさんのオフィスで開催された『初夏のJavaScript祭 in メンバーズキャリア』で登壇の枠を頂いたのでSPAをリリースする際によく検討されるSSR(Server Side Red