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
190
OpenNext + Hono on Cloudflare で イマドキWeb開発スタックを実現する
rokuosan
May 29, 2025
Tweet
Share
More Decks by rokuosan
See All by rokuosan
Workers を定期実行する方法は一つじゃない
rokuosan
0
150
Kotlin で始める MCP 入門
rokuosan
0
110
【学内向け】主観でやるオレオレ RubyKaigi 2025 Recap
rokuosan
0
6
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
240
KC3 2024 Dockerで始める自宅サーバー入門
rokuosan
0
210
お手軽アウトプット環境を求めて
rokuosan
0
170
Kotlinを使ってマイクラ鯖をWebで管理するアプリケーションを作るつもりでギリギリ間に合う予定だったけど非同期処理に躓いて大失敗した話
rokuosan
0
170
Other Decks in Programming
See All in Programming
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
時間軸から考えるTerraformを使う理由と留意点
fufuhu
3
200
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
210
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.8k
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
390
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
速いWebフレームワークを作る
yusukebe
2
340
為你自己學 Python - 冷知識篇
eddie
1
310
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
370
Kiroで始めるAI-DLC
kaonash
2
430
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
780
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Featured
See All Featured
Bash Introduction
62gerente
614
210k
Designing for humans not robots
tammielis
253
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Making Projects Easy
brettharned
117
6.4k
How to Ace a Technical Interview
jacobian
279
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Side Projects
sachag
455
43k
The Language of Interfaces
destraynor
160
25k
Writing Fast Ruby
sferik
628
62k
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)