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.7k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
7k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.8k
Figma Plugin公開までの壁を乗り越える
mottox2
2
3.1k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
660
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
640
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
Other Decks in Technology
See All in Technology
GitHub MCP Serverを使って Pull Requestを作る、レビューする
hiyokose
2
570
AIエージェント開発における「攻めの品質改善」と「守りの品質保証」 / 2024.04.09 GPU UNITE 新年会 2025
smiyawaki0820
0
210
「それはhowなんよ〜」のガイドライン #orestudy
77web
9
2.3k
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
2
250
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
3
1.8k
Zabbixチョットデキルとは!?
kujiraitakahiro
0
120
コンソールで学ぶ!AWS CodePipelineの機能とオプション
umekou
3
130
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
180
AWSエンジニアがSAPのデータ抽出してみた
mayumi_hirano
0
110
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
180
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
120
試験は暗記より理解 〜効果的な試験勉強とその後への活かし方〜
fukazawashun
0
160
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Code Reviewing Like a Champion
maltzj
522
39k
How GitHub (no longer) Works
holman
314
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
360
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