摘要
1) 一句话总结 借助 OpenNext 项目,Next.js 现可与 Cloudflare Workers 实现深度集成,使开发者能在同一项目中同时运行网站与 Workers 的多种后台处理程序。
2) 关键要点
- 集成方式演进:过去 Cloudflare 仅支持通过 Cloudflare Pages 集成 Next.js,现可通过 OpenNext 项目直接与 Cloudflare Workers 集成。
- 功能扩展:结合 Workers,Next.js 项目可使用 Fetch Handler(处理 HTTP/WebSocket)、Email Handler(接收邮件)和 Scheduled Handler(后台定时任务)等功能。
- 自定义 Worker 路径:在
wrangler.toml中,将默认的main路径修改为自定义文件(例如main = "src/worker.ts")。 - 引入构建产物:在自定义的 Worker 文件中,需引入通过
npm run preview/deploy生成的构建文件../.worker-next/index.mjs。 - 代码实现:在自定义 Worker 中,可通过
export default暴露fetch(代理给 PagesFunction.fetch)、scheduled和email等处理函数,从而在提供网站服务的同时运行其他后台服务。
3) 风险/不足
- 默认配置限制:使用 OpenNext 创建项目时,默认配置(
main = .worker-next/index.mjs)会导致无法直接添加其他的 worker handlers,必须通过自定义 Worker 文件来绕过此限制。
正文
以前 CloudFlare 只提供了 Cloudflare Pages 的方式集成 Nextjs,现在有了 OpenNext https://opennext.js.org/项目后,Nextjs 也可以和 Cloudflare Workers集成,这意味着你创建一个项目,不仅有网站,还有 Workers。
毕竟 CloudFlare 的 Worker,可以有处理 Http/WebSocket 请求的 Fetch Handler https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/ ,还有接收邮件的 Email Handler https://developers.cloudflare.com/email-routing/email-workers/runtime-api/,还有后台定时任务的 Scheduled Handler https://developers.cloudflare.com/workers/runtime-apis/handlers/scheduled/ 等等强大的功能。
在你使用 OpenNext 创建一个 Nextjs 项目,在 wrangler.toml 中,worker 默认指向的是:
main = .worker-next/index.mjs
这样你是无法加其他 worker handlers,但是你可以自己创建一个 worker 文件,比如 src/worker.ts,在 wrangler.toml 中,将 worker 路径指向它:
main = "src/worker.ts"
然后在 worker 文件中,你再 import build 好的 ../.worker-next/index.mjs 文件(npm run preview/deploy 可以生成),就可以在 Worker 里面提供网站之外的服务:
import PagesFunction from "../.worker-next/index.mjs";
export default {
// fetch: PagesFunction.fetch,
async fetch(
request: Request,
env: CloudflareEnv,
ctx: ExecutionContext
): Promise<Response> {
return PagesFunction.fetch(request, env, ctx);
},
async scheduled(event, env, ctx) {
ctx.waitUntil(doSomeTaskOnASchedule());
},
async email(message, env, ctx) {
message.forward("<YOUR_EMAIL>");
},
} satisfies ExportedHandler<CloudflareEnv>;