$30 off During Our Annual Pro Sale. View Details »

Next.js meets Netlify

mottox2
May 22, 2019

Next.js meets Netlify

mottox2

May 22, 2019
Tweet

More Decks by mottox2

Other Decks in Technology

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