Next.js meets Netlify

297a42b94a1bda236982ec1cd81089b6?s=47 mottox2
May 22, 2019

Next.js meets Netlify

297a42b94a1bda236982ec1cd81089b6?s=128

mottox2

May 22, 2019
Tweet

Transcript

  1. Next.js meets Netlify 2019.05.22 Ginza.js#1 / @mottox2

  2. フロントエンドエンジニア(Web/iOS) Gatsby, Gridsome maintainer お仕事 OSS mottox2 @ ؿٔ٦ٓٝأ8FCؒٝآص، ⾃⼰紹介

    #engineers_lt
  3. #ginzajs Next.js • Next.jsはSSRが組み込まれているReactベースのフレームワーク • pages/以下にエントリーポイントを置くとディレクトリ構造とURL構造が ⼀致する • pages/index.js =>

    example.com/ • pages/detail.js => example.com/detail • getInitialPropsというメソッドでサーバーサイドでのデータ取得を⾏う • Next.js v8でserverlessモードが追加された
  4. #ginzajs Netlify • 静的サイトのホスティングに強いホスティングサービス • リポジトリを⽤意してpublish directoryとdeploy commandを設定する だけでデプロイが可能 •

    GitHubと相性がよく、masterブランチをproductionにデプロイ。 • デプロイ⽬的のCI設定が不要 • Functions(裏側はAWS Lambda)を使うと動的なレスポンスを返すこと ができる
  5. #engineers_lt Netlify FunctionsでNext.jsのSSRを⾏い サイトを構築する テーマ

  6. #ginzajs Serverless Next.js • next.config.jsにtarget: serverlessを指定してビルド • 各ページごとにファイルが⽣成される。 • /pages/index.js

    => .next/serverless/pages./index.js • /pages/index.js => .next/serverless/pages./detail.js next.config.js
  7. #ginzajs • Cloud Functionsで動かす例 • ⽣成されたファイルを実⾏するだけでSSRが実現できる Serverless Next.js

  8. #ginzajs Netlify Functions • 設定したディレクトリ(functions directory)にあるJSファイルが⼀つの 関数と⾒なされ、固有のURLが付与される。 • 例: functions

    directoryにfunctions/を指定した場合 • functions/index.js => example.com/.netlify/functions/index • functions/detail.js => example.com/.netlify/functions/detail netlify.toml
  9. #ginzajs Netlify Functions • Functionの例

  10. #ginzajs Netlify Functions • netlify-lambdaをビルドに利⽤する。 • webpackとbabelの薄いラッパー。指定したディレクトリのJSファイルを ビルドしてくれる。 • src/functionsにソースコードを書いている時

    • `netlify-lambda build src/functions` • functions directory(ex. functions/)にビルドされる。
  11. #ginzajs Netlifyのリライト • ただ、FunctionsのURL(ex. example.com/.netlify/functions/index)は⼈ 間に優しくない。 • Netlifyではリライトも⽤意されており、publish directory以下に `_redirects`ファイルにリライトの情報を記述する

    public/_redirects
  12. #ginzajs Netlify FunctionsとNext.jsのつなぎこみ • next build && cp -a public/_next/serverless/

    pages src/functions/ && netlify-lambda build src/functions • とても煩雑。Cloud Functionsでやっても同じ感 じになります。
  13. #ginzajs Netlify FunctionsとNext.jsのつなぎこみ • Next.jsで⽣成される関数にはreqとresが必要。Functionsの引数と⼀致し ない。 • AWS Labmdaの引数をreqとresを変換するマッパーを⽤意する

  14. #ginzajs Netlify FunctionsとNext.jsのつなぎこみ • Netlifyではリライト先にクエリパラメータを指定できないので、正規表現 でゴリ押し src/functions/post.js

  15. #ginzajs デモ • Demo: https://next-on-netlify.netlify.com/ • Source: https://github.com/mottox2-sandbox/next-on-netlify

  16. #ginzajs まとめ • NetlifyでもSSRできる • ⾃分はFirebaseで同じことをやっています • Firebase + Nuxtの話と被りを感じた

    • 既出だったのでNetlifyでやってみました • Netlify、この本がおすすめ(宣伝) • https://booth.pm/ja/items/1316769 • Next.jsを利⽤するならnow.shが⼀番楽です
  17. #ginzajs Thank you! 2019.05.22 Ginza.js#1 / @mottox2