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

なぜSPA技術でウェブサイトをつくるのか?

ここ最近、SPAを作るフロントエンドエンジニアを中心に、アプリケーションではないウェブサイトもReactやVueで作る動きが活発になってきました。 - そもそもなぜReactやVueを使ってウェブ

spa
tips

VSCodeの調子が悪い時はVSCode Insidersに避難しよう

> 私のVSCode遅くない?私のVSCode遅くない? 自分は普段から『VSCode』(Visual Studio Code)を愛用していて、RubyやPythonなどJavaScript/Ty

vscodepoem
event

「技術書典7」にサークル参加してきた

2019/09/22に池袋で開催された技術書典にサークル参加してきました。今回はJAMStackの既刊を持たず、Slack App開発本を2冊頒布してきました。 だいぶ遅れてしまいましたが、「ブロ

技術同人誌