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
1
ViewComponent による コンポーネント指向 UI 開発
miyamae
0
170
プログラマのためのChatGPT
miyamae
1
160
TypeScript基礎
miyamae
0
440
Cloudflare
miyamae
0
79
ブラウザでうごく! ES6+ モダンJavaScript
miyamae
0
1.2k
Other Decks in Programming
See All in Programming
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
180
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
500
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Porting a visionOS App to Android XR
akkeylab
0
660
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
Goで作る、開発・CI環境
sin392
0
260
型で語るカタ
irof
0
530
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Scaling GitHub
holman
460
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Speed Design
sergeychernyshev
32
1k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
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 中などに手軽に使えて便利か も。