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
NextJSと静的ホスティングサービス
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Tatsuya Miyamae
September 07, 2022
Programming
0
320
NextJSと静的ホスティングサービス
Tatsuya Miyamae
September 07, 2022
Tweet
Share
More Decks by Tatsuya Miyamae
See All by Tatsuya Miyamae
パスキー(Passkeys)入門
miyamae
0
5
ViewComponent による コンポーネント指向 UI 開発
miyamae
0
200
プログラマのためのChatGPT
miyamae
1
170
TypeScript基礎
miyamae
0
470
Cloudflare
miyamae
0
84
ブラウザでうごく! ES6+ モダンJavaScript
miyamae
0
1.4k
Other Decks in Programming
See All in Programming
izumin5210のプロポーザルのネタ探し #tskaigi_msup
izumin5210
1
140
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
450
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
610
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
140
CSC307 Lecture 02
javiergs
PRO
1
780
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
130
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
140
Grafana:建立系統全知視角的捷徑
blueswen
0
330
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
masahiro_nishimi
6
600
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
ノイジーネイバー問題を解決する 公平なキューイング
occhi
0
110
Featured
See All Featured
Chasing Engaging Ingredients in Design
codingconduct
0
110
Facilitating Awesome Meetings
lara
57
6.8k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
100
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
320
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
Producing Creativity
orderedlist
PRO
348
40k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
350
GraphQLとの向き合い方2022年版
quramy
50
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
Transcript
Agenda CSR, SSR, SG(SSG), ISR Next.js 静的ホスティングサービス CodeSandbox
CSR, SSR, SG(SSG), ISR フロントエンドのView アーキテクチャ https://zenn.dev/bitarts/articles/37260ddb28ae5d
実際の例 Clipkit のAPI を使ってNext.js のISR を実装しました。 https://github.com/miyamae/clipkit-nextjs
Next.js React をベースにSSR/SSG/ISR 機能とファイルベースルーティング機 能を追加したフレームワーク。画面遷移をともなうアプリに最低限必 要な機能がシンプルに入っている感じ。 フロントエンドだけでなくサーバーサイドも一部カバーしている。 (API ルート、SSR 機能)
Next.js をベースにしたフルスタックフレームワークもいくつか登場し てきている。
(Next.js) ファイルベースルーティング React Router の場合 コンポーネント階層で表現。 <BrowserRouter> <h1>Hello React Router</h1>
<Route path="/"> <Home /> <Route path="/subpage"> <SubPage /> </Route> </Route> </BrowserRouter>
Next.js のルーティング 静的Web サイトみたいにコンポーネントファイルを配置したディレク トリ構造で表現。 コンポーネントの置き場所に悩まなくていいので楽。 pages/ index.tsx articles/ index.tsx
[id]/ <-- 動的なルート index.tsx
(Next.js) SSR/SSG/ISR コンポーネントでデータを取得する処理を実装するメソッドを替える だけ。 SSR getServerSideProps を実装するとSSR (リクエスト時取得) export async
function getServerSideProps(context) { const article = { ... }; return { props: { article } }; }
SSG/ISR getStaticProps を実装するとSSG (ビルド時取得) export async function getStaticProps(context) { const
article = { ... }; return { props: { article } }; } getStaticProps でrevalidate を指定するとISR 。(例) return { props: { article }, revalidate: 10 };
(Next.js) API ルート サーバーサイドのAPI を実装できる。(SSR と組み合わせればNext.js だけでサーバーサイドアプリが作れてしまう) pages/api/user.js export default
(req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ name: 'John Doe' })); };
静的ホスティングサービス フロントエンドアプリのデプロイ先。 (Q) index.html 置ければどんなサーバでもいい? (A) 少し問題がある。-> リロード問題 SPA に対応したホスティングサービスを利用するのが楽。
Netlify Vercel Cloudflare Pages
Netlify https://www.netlify.com/ 3 つの中では最古参。 管理者1 人なら無料でいくつでもサイト作れる。 無料枠の転送量制限は100GB/ 月まで。 有料プランは管理者1 人ごとに$19/
月〜 フォーム設置できる機能がある。 無料版は日本リージョンがないので遅い。
Vercel https://vercel.com/ Next.js の開発元が運営している。 Next.js で使うとSSR やISR が可能。(唯一無二) 管理者1 人なら無料でいくつでもサイト作れる。(商用不可)
無料枠の転送量制限は100GB/ 月まで。 有料プランは管理者1 人ごとに$20/ 月〜 料金や制限はほぼNetlify と同じだが、唯一SSR/ISR できる。
Cloudflare Pages https://pages.cloudflare.com/ 無料版で転送量制限なし。サイト数も制限なし(!!!) これの登場で静的ホスティングは完全無料の時代がきました。
S3 + CloudFront 工夫すれば可能。 CloudFront で404 のカスタムエラーページで/index.html を指定して、 レスポンスコードを200 に設定すればok
。 デプロイはGitHub Actions などで自力で構築する必要がある。 AWS にまとめたいならあり。 SSR/ISR したい場合は静的ホスティングはあきらめて、ECS などを使 うしかない。
余談 Jamstack これらのサービスにはSPA じゃなく普通のWeb サイトをホスティング してもよい。ヘッドレスCMS +SSG でページを生成して静的ホスティ ングサービスにデプロイする構成をJamstack という。
エッジコンピューティング 基本的には静的HTML だけだが、CDN エッジ上で簡単なプログラムを 動かすエッジコンピューティングをサポートしており、ちょっとした バックエンド処理は可能。
CodeSandbox https://codesandbox.io/ JavaScript のサンプルコード実行場所としておなじみ。 実はSSR などサーバーサイドも動く。Next.js の実行環境も一瞬で用意 できる。 GitHub と連動できる。Vercel/Netlify
へデプロイもできる。 GitHub と繋げておくと、リモートMTG 中などに手軽に使えて便利か も。