Next.js meets Netlify

Ginza.js #1
demo: https://next-on-netlify.netlify.com/

Transcript

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

   View Slide

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

   View Slide

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モードが追加された
   

   View Slide

4. #ginzajs
   Netlify
   • 静的サイトのホスティングに強いホスティングサービス
   • リポジトリを⽤意してpublish directoryとdeploy commandを設定する
   だけでデプロイが可能
   • GitHubと相性がよく、masterブランチをproductionにデプロイ。
   • デプロイ⽬的のCI設定が不要
   • Functions（裏側はAWS Lambda）を使うと動的なレスポンスを返すこと
   ができる
   

   View Slide

5. #engineers_lt
   Netlify FunctionsでNext.jsのSSRを⾏い
   サイトを構築する
   テーマ
   

   View Slide

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
   

   View Slide

7. #ginzajs
   • Cloud Functionsで動かす例
   • ⽣成されたファイルを実⾏するだけでSSRが実現できる
   Serverless Next.js
   

   View Slide

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
   

   View Slide

9. #ginzajs
   Netlify Functions
   • Functionの例
   

   View Slide

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

    View Slide

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

    View Slide

12. #ginzajs
    Netlify FunctionsとNext.jsのつなぎこみ
    • next build && cp -a public/_next/serverless/
    pages src/functions/ && netlify-lambda build
    src/functions
    • とても煩雑。Cloud Functionsでやっても同じ感
    じになります。
    

    View Slide

13. #ginzajs
    Netlify FunctionsとNext.jsのつなぎこみ
    • Next.jsで⽣成される関数にはreqとresが必要。Functionsの引数と⼀致し
    ない。
    • AWS Labmdaの引数をreqとresを変換するマッパーを⽤意する
    

    View Slide

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

    View Slide

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

    View Slide

16. #ginzajs
    まとめ
    • NetlifyでもSSRできる
    • ⾃分はFirebaseで同じことをやっています
    • Firebase + Nuxtの話と被りを感じた
    • 既出だったのでNetlifyでやってみました
    • Netlify、この本がおすすめ（宣伝）
    • https://booth.pm/ja/items/1316769
    • Next.jsを利⽤するならnow.shが⼀番楽です
    

    View Slide

17. #ginzajs
    Thank you!
    2019.05.22 Ginza.js#1 / @mottox2
    

    View Slide