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
Tatsuya Miyamae
September 07, 2022
Programming
0
300
NextJSと静的ホスティングサービス
Tatsuya Miyamae
September 07, 2022
Tweet
Share
More Decks by Tatsuya Miyamae
See All by Tatsuya Miyamae
パスキー(Passkeys)入門
miyamae
0
2
ViewComponent による コンポーネント指向 UI 開発
miyamae
0
170
プログラマのためのChatGPT
miyamae
1
160
TypeScript基礎
miyamae
0
450
Cloudflare
miyamae
0
79
ブラウザでうごく! ES6+ モダンJavaScript
miyamae
0
1.3k
Other Decks in Programming
See All in Programming
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
3
830
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
1から理解するWeb Push
dora1998
7
2k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
5k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
580
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
AIでLINEスタンプを作ってみた
eycjur
1
230
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
320
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
5k
Featured
See All Featured
KATA
mclloyd
32
14k
Automating Front-end Workflow
addyosmani
1370
200k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
590
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Statistics for Hackers
jakevdp
799
220k
Designing Experiences People Love
moore
142
24k
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 中などに手軽に使えて便利か も。