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
150
OpenNext + Hono on Cloudflare で イマドキWeb開発スタックを実現する
rokuosan
May 29, 2025
Tweet
Share
More Decks by rokuosan
See All by rokuosan
Workers を定期実行する方法は一つじゃない
rokuosan
0
100
Kotlin で始める MCP 入門
rokuosan
0
60
【学内向け】主観でやるオレオレ RubyKaigi 2025 Recap
rokuosan
0
4
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
220
KC3 2024 Dockerで始める自宅サーバー入門
rokuosan
0
170
お手軽アウトプット環境を求めて
rokuosan
0
160
Kotlinを使ってマイクラ鯖をWebで管理するアプリケーションを作るつもりでギリギリ間に合う予定だったけど非同期処理に躓いて大失敗した話
rokuosan
0
170
Other Decks in Programming
See All in Programming
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
160
NPOでのDevinの活用
codeforeveryone
0
910
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
120
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
220
構文解析器入門
ydah
6
1.6k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
150
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
110
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
190
CDK引数設計道場100本ノック
badmintoncryer
2
500
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
820
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Balancing Empowerment & Direction
lara
1
470
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
A better future with KSS
kneath
238
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
A Tale of Four Properties
chriscoyier
160
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Cult of Friendly URLs
andyhume
79
6.5k
Faster Mobile Websites
deanohume
308
31k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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)