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
130
OpenNext + Hono on Cloudflare で イマドキWeb開発スタックを実現する
rokuosan
May 29, 2025
Tweet
Share
More Decks by rokuosan
See All by rokuosan
Kotlin で始める MCP 入門
rokuosan
0
53
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
220
KC3 2024 Dockerで始める自宅サーバー入門
rokuosan
0
160
お手軽アウトプット環境を求めて
rokuosan
0
150
Kotlinを使ってマイクラ鯖をWebで管理するアプリケーションを作るつもりでギリギリ間に合う予定だったけど非同期処理に躓いて大失敗した話
rokuosan
0
160
Other Decks in Programming
See All in Programming
Porting a visionOS App to Android XR
akkeylab
0
270
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
710
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
590
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
680
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
600
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
710
童醫院敏捷轉型的實踐經驗
cclai999
0
210
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
410
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Orchestrator
shlominoach
188
11k
Facilitating Awesome Meetings
lara
54
6.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Automating Front-end Workflow
addyosmani
1370
200k
Building an army of robots
kneath
306
45k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
BBQ
matthewcrist
89
9.7k
Embracing the Ebb and Flow
colly
86
4.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
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)