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
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを...
Search
rokuosan
May 29, 2025
Programming
0
230
OpenNext + Hono on Cloudflare で イマドキWeb開発スタックを実現する
rokuosan
May 29, 2025
Tweet
Share
More Decks by rokuosan
See All by rokuosan
Workers を定期実行する方法は一つじゃない
rokuosan
0
180
Kotlin で始める MCP 入門
rokuosan
0
130
【学内向け】主観でやるオレオレ RubyKaigi 2025 Recap
rokuosan
0
7
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
240
KC3 2024 Dockerで始める自宅サーバー入門
rokuosan
0
230
お手軽アウトプット環境を求めて
rokuosan
0
170
Kotlinを使ってマイクラ鯖をWebで管理するアプリケーションを作るつもりでギリギリ間に合う予定だったけど非同期処理に躓いて大失敗した話
rokuosan
0
180
Other Decks in Programming
See All in Programming
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
1.4k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
400
CSC305 Lecture 03
javiergs
PRO
0
200
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
550
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
120
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
110
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
スマホで海難事故は防げるか?年間2000件以上の小型船舶の事故に挑むアプリ開発
atsuki_seo
0
110
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
220
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
180
まだ世にないサービスをAIと創る話 〜 失敗から学ぶフルスタック開発への挑戦 〜
katayamatg
0
160
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
120
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Building an army of robots
kneath
306
46k
The Power of CSS Pseudo Elements
geoffreycrofte
78
6k
Designing for humans not robots
tammielis
254
25k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Done Done
chrislema
185
16k
Why Our Code Smells
bkeepers
PRO
339
57k
Building Adaptive Systems
keathley
43
2.8k
Facilitating Awesome Meetings
lara
56
6.5k
How to Ace a Technical Interview
jacobian
280
23k
Transcript
OpenNext + Hono on Cloudflare Workers で イマドキWeb個人開発スタックを実現する rokuosan (id:rokuokun)
About me (5.0s) • id:rokuokun / rokuosan / ろくお •
若者です • 趣味 ◦ Kotlin, Go ◦ ではない→ Perl, TypeScript • https://x.com/rokuosan_dev
このLTの内容 • 二番煎じです • 大体これと同じことをやります ◦ mizchi さんの 「遂に Cloudflare
+ Next.js(OpenNext) + Prisma 6.7.0(No Rust) が動く時代が来た」 ◦ https://zenn.dev/mizchi/articles/cloudflare-opennext-prisma-no-rust ◦ 違いは DB 周りと Hono を載せる部分 • 個人開発向けです
すでに記事あります • 気になった人は読んでみてください • https://blog.km3.dev/entry/20250527/1748280176
知っておくべきこと • Cloudflare Workers ◦ Cloudflare の Edge Computing •
OpenNext ◦ Next.js の脱 Vercel をするために頑張っているプロジェクト ◦ AWS 、 Cloudflare 、 Netlify をサポート(2025/05/29現在) • Hono ◦ ナウなヤングにバカウケのフレームワーク
OpenNext on Cloudflare Workers のセットアップ
超簡単 1 ステップ • これで OpenNext on Cloudflare Workers が出来上がる
• 今日はこれだけ覚えて帰ってください。
さっきデプロイしたやつ • https://kyototechtalk-8.km3.workers.dev/ • 大迫力の Next.js のランディングページが見えるはず
お手軽2ステップ • npm create cloudflare で Next.js 向けテンプレートをつくる ◦ npm
create cloudflare@latest -- --framework=next --platform=workers ◦ Next.js on Cloudflare Workers が出来上がる • OpenNext に差し替える ◦ npm install @opennextjs/cloudflare@latest ◦ next.config.ts にいい感じのコードを追加する
(ちなみに)OpenNext に差し替えるには • 公式ドキュメント通りに進めるだけ ◦ https://opennext.js.org/cloudflare/get-started • next.config.ts に2行加える(伏線) •
package.json の scripts に↓を書いておく
やっておくと良いこと • キャッシュ設定 ◦ Workers では next.config.ts 上での Cache-Control ヘッダ設定ができない
◦ public/_headers に以下の内容を書いておく(デフォルトのNext.jsと同じ設定)
App Router に Hono を入れる
Catch-all Route に Hono をおく • src/app/api/[[...route]]/route.ts に↓を書く
Cloudflare D1 と接続する
Cloudflare D1 と繋げるには • Hono では Bindings に書く ◦ OpenNext
ではこれをすると型情報が変わるのでビルド不可能 • じゃあどうするか ◦ getCloudflareContext() という謎関数を呼ぶ ◦ ↑ ローカルはどうやって?
Cloudflare D1 と繋げるには • Hono では Bindings に書く ◦ OpenNext
ではこれをすると型情報が変わるのでビルド不可能 • じゃあどうするか ◦ getCloudflareContext() という謎関数を呼ぶ ◦ ↑ ローカルはどうやって? ◦ ↓これでローカルに SQLite を立ててくれる(伏線回収)
Cloudflare D1 with Drizzle ORM • マイグレーション ◦ 作成は npx
drizzle-kit generate ◦ 実行は npx wrangler d1 migrations apply
Cloudflare D1 with Drizzle ORM getCloudflareContext()からのDBを Drizzle で扱えるように Middleware で切り替える
Hono のうまみを享受する
Hono Client を使う • hc でクライアント作成 • client.<Endpoint>でAPI呼び出し • おまけで型情報がついてくる
Hono Client を使う(SSR) • SSRも当然できるぞ!
この構成のいいところ
メリット • Next.js の資産を大体使える • Next.js でバックエンド処理を書かなくていい ◦ いちいちディレクトリ切って route.ts
とか書かなくていい • バックエンドとフロントエンドでアーキテクチャを変更できる ◦ Next.js の制約から離れてある程度自由に書くことができる ◦ やりたければクリーンアーキテクチャぽくもかける • 安い
デメリット • OpenNext の開発サイドが疲れるリスク ◦ 依存が増えると言えることではある • 常にアップストリームに追従しているとは限らない ◦ とはいえ、更新されてすぐにバージョン上げることはない
• 実は無料枠だとすぐに超えそう ◦ 3MiB 上限だけど、この時点で大体 2.4 MiB ある(そんな)
おわり
さっき作ったリポジトリ • https://github.com/rokuosan/kyototechtalk-8
OpenNext + Hono on Cloudflare Workers で イマドキWeb個人開発スタックを実現する rokuosan (id:rokuokun)