Ginza.js #1 demo: https://next-on-netlify.netlify.com/
Next.js meets Netlify2019.05.22 Ginza.js#1 / @mottox2
View Slide
フロントエンドエンジニア(Web/iOS)Gatsby, Gridsome maintainerお仕事OSSmottox2@ؿٔ٦ٓٝأ8FCؒٝآص،⾃⼰紹介#engineers_lt
#ginzajsNext.js• Next.jsはSSRが組み込まれているReactベースのフレームワーク• pages/以下にエントリーポイントを置くとディレクトリ構造とURL構造が⼀致する• pages/index.js => example.com/• pages/detail.js => example.com/detail• getInitialPropsというメソッドでサーバーサイドでのデータ取得を⾏う• Next.js v8でserverlessモードが追加された
#ginzajsNetlify• 静的サイトのホスティングに強いホスティングサービス• リポジトリを⽤意してpublish directoryとdeploy commandを設定するだけでデプロイが可能• GitHubと相性がよく、masterブランチをproductionにデプロイ。• デプロイ⽬的のCI設定が不要• Functions(裏側はAWS Lambda)を使うと動的なレスポンスを返すことができる
#engineers_ltNetlify FunctionsでNext.jsのSSRを⾏いサイトを構築するテーマ
#ginzajsServerless Next.js• next.config.jsにtarget: serverlessを指定してビルド• 各ページごとにファイルが⽣成される。• /pages/index.js => .next/serverless/pages./index.js• /pages/index.js => .next/serverless/pages./detail.jsnext.config.js
#ginzajs• Cloud Functionsで動かす例• ⽣成されたファイルを実⾏するだけでSSRが実現できるServerless Next.js
#ginzajsNetlify Functions• 設定したディレクトリ(functions directory)にあるJSファイルが⼀つの関数と⾒なされ、固有のURLが付与される。• 例: functions directoryにfunctions/を指定した場合• functions/index.js => example.com/.netlify/functions/index• functions/detail.js => example.com/.netlify/functions/detailnetlify.toml
#ginzajsNetlify Functions• Functionの例
#ginzajsNetlify Functions• netlify-lambdaをビルドに利⽤する。• webpackとbabelの薄いラッパー。指定したディレクトリのJSファイルをビルドしてくれる。• src/functionsにソースコードを書いている時• `netlify-lambda build src/functions`• functions directory(ex. functions/)にビルドされる。
#ginzajsNetlifyのリライト• ただ、FunctionsのURL(ex. example.com/.netlify/functions/index)は⼈間に優しくない。• Netlifyではリライトも⽤意されており、publish directory以下に`_redirects`ファイルにリライトの情報を記述するpublic/_redirects
#ginzajsNetlify FunctionsとNext.jsのつなぎこみ• next build && cp -a public/_next/serverless/pages src/functions/ && netlify-lambda buildsrc/functions• とても煩雑。Cloud Functionsでやっても同じ感じになります。
#ginzajsNetlify FunctionsとNext.jsのつなぎこみ• Next.jsで⽣成される関数にはreqとresが必要。Functionsの引数と⼀致しない。• AWS Labmdaの引数をreqとresを変換するマッパーを⽤意する
#ginzajsNetlify FunctionsとNext.jsのつなぎこみ• Netlifyではリライト先にクエリパラメータを指定できないので、正規表現でゴリ押しsrc/functions/post.js
#ginzajsデモ• Demo: https://next-on-netlify.netlify.com/• Source: https://github.com/mottox2-sandbox/next-on-netlify
#ginzajsまとめ• NetlifyでもSSRできる• ⾃分はFirebaseで同じことをやっています• Firebase + Nuxtの話と被りを感じた• 既出だったのでNetlifyでやってみました• Netlify、この本がおすすめ(宣伝)• https://booth.pm/ja/items/1316769• Next.jsを利⽤するならnow.shが⼀番楽です
#ginzajsThank you!2019.05.22 Ginza.js#1 / @mottox2