如何让Next.js应用对接Cloudflare Workers - Workers Sites并解决运行报错

你遇到的报错是因为直接把Flareact专属的Worker逻辑套用到了标准Next.js项目上：Flareact是专门适配Cloudflare Workers的边缘渲染框架，它的构建流程会生成符合其预期的资源结构，标准Next.js的默认输出和它完全不兼容，所以会触发找不到index.html的报错。

你可以按以下步骤调整实现标准Next.js SPA在Cloudflare Workers Sites上的部署：

1. 开启Next.js静态导出 #

在项目根目录的next.config.js中添加配置，开启静态导出模式，构建后会生成所有SPA需要的静态资源：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 开启静态导出
  output: 'export',
  // 确保路由路径对应目录下的index.html
  trailingSlash: true,
}

module.exports = nextConfig

配置完成后执行npm run build，所有静态资源会输出到项目根目录的out文件夹中。

2. 调整wrangler配置 #

替换Flareact的示例配置，使用标准Workers Sites配置，指定静态资源目录为刚才生成的out文件夹：

name = "你的项目名称"
main = "worker/index.js"
compatibility_date = "2024-01-01"
account_id = "你的Cloudflare账号ID"

[site]
# 指向Next.js导出的静态资源目录
bucket = "./out"
entry-point = "worker"

3. 替换Worker运行逻辑 #

删除原有Flareact的handleEvent相关代码，换成适配SPA的路由重写逻辑，所有非静态资源请求会自动回退到index.html交给前端路由处理：

import { getAssetFromKV } from "@cloudflare/kv-asset-handler"

addEventListener("fetch", event => {
  event.respondWith(handleEvent(event))
})

async function handleEvent(event) {
  try {
    // 优先匹配返回静态资源
    return await getAssetFromKV(event)
  } catch (e) {
    // 匹配不到静态资源时返回index.html
    return await getAssetFromKV(event, {
      mapRequestToAsset: req => new Request(new URL("/index.html", req.url), req)
    })
  }
}

4. 安装依赖并部署 #

执行npm install @cloudflare/kv-asset-handler安装依赖后，运行wrangler deploy即可完成部署。

内容的提问来源于stack exchange，提问作者Ferhat Suat Erdoğan