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.8k
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
7
1.8k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
7.1k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.9k
Figma Plugin公開までの壁を乗り越える
mottox2
3
3.4k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
680
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
650
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
Other Decks in Technology
See All in Technology
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
390
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
420
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
ローカルLLMでファインチューニング
knishioka
0
150
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
170
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
180
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
解析の定理証明実践@Lean 4
dec9ue
0
170
フィンテック養成勉強会#54
finengine
0
170
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
A better future with KSS
kneath
239
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Making Projects Easy
brettharned
116
6.3k
Why Our Code Smells
bkeepers
PRO
337
57k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
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