Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.js meets Netlify
Search
mottox2
May 22, 2019
Technology
3
1.6k
Next.js meets Netlify
Ginza.js #1
demo:
https://next-on-netlify.netlify.com/
mottox2
May 22, 2019
Tweet
Share
More Decks by mottox2
See All by mottox2
もう一歩進めたい OG画像の動的生成
mottox2
6
1.1k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
7
5.8k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.3k
Figma Plugin公開までの壁を乗り越える
mottox2
2
2.1k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
560
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.5k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
510
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
32k
Other Decks in Technology
See All in Technology
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
3.8k
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
230
KubeCon EU: Unlocking new Platform Experiences with Open Interfaces
salaboy
1
370
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
1.9k
Autify Company Deck
autifyhq
1
30k
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
520
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
なんで私に登壇依頼が?! ~頼られるエンジニアになるためには~ /
mixi_engineers
PRO
2
200
データマネジメントを支える武器としてのメタデータ管理
10xinc
1
290
Featured
See All Featured
How to name files
jennybc
62
92k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Design by the Numbers
sachag
274
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Designing for Performance
lara
601
67k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
The Language of Interfaces
destraynor
150
23k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
GraphQLとの向き合い方2022年版
quramy
28
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Transcript
Next.js meets Netlify 2019.05.22 Ginza.js#1 / @mottox2
フロントエンドエンジニア(Web/iOS) Gatsby, Gridsome maintainer お仕事 OSS mottox2 @ ؿٔ٦ٓٝأ8FCؒٝآص، ⾃⼰紹介
#engineers_lt
#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モードが追加された
#ginzajs Netlify • 静的サイトのホスティングに強いホスティングサービス • リポジトリを⽤意してpublish directoryとdeploy commandを設定する だけでデプロイが可能 •
GitHubと相性がよく、masterブランチをproductionにデプロイ。 • デプロイ⽬的のCI設定が不要 • Functions(裏側はAWS Lambda)を使うと動的なレスポンスを返すこと ができる
#engineers_lt Netlify FunctionsでNext.jsのSSRを⾏い サイトを構築する テーマ
#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
#ginzajs • Cloud Functionsで動かす例 • ⽣成されたファイルを実⾏するだけでSSRが実現できる Serverless Next.js
#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
#ginzajs Netlify Functions • Functionの例
#ginzajs Netlify Functions • netlify-lambdaをビルドに利⽤する。 • webpackとbabelの薄いラッパー。指定したディレクトリのJSファイルを ビルドしてくれる。 • src/functionsにソースコードを書いている時
• `netlify-lambda build src/functions` • functions directory(ex. functions/)にビルドされる。
#ginzajs Netlifyのリライト • ただ、FunctionsのURL(ex. example.com/.netlify/functions/index)は⼈ 間に優しくない。 • Netlifyではリライトも⽤意されており、publish directory以下に `_redirects`ファイルにリライトの情報を記述する
public/_redirects
#ginzajs Netlify FunctionsとNext.jsのつなぎこみ • next build && cp -a public/_next/serverless/
pages src/functions/ && netlify-lambda build src/functions • とても煩雑。Cloud Functionsでやっても同じ感 じになります。
#ginzajs Netlify FunctionsとNext.jsのつなぎこみ • Next.jsで⽣成される関数にはreqとresが必要。Functionsの引数と⼀致し ない。 • AWS Labmdaの引数をreqとresを変換するマッパーを⽤意する
#ginzajs Netlify 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が⼀番楽です
#ginzajs Thank you! 2019.05.22 Ginza.js#1 / @mottox2