如何在Next.js中使用Cloudflare的Server Actions？

Question

使用use server和 export const runtime = 'edge' 冲突，大家是如何解决 ？

使用ai搜索过解决方案，貌似没用。

在本地可以使用，但是上了cloudflare环境就没法访问。

Answer 1

在 Next.js 中使用 Cloudflare 的 Server Actions 时遇到 use server 与 export const runtime = 'edge' 冲突的问题，是边缘计算环境下的常见挑战。以下是系统化的解决方案和实践建议：

核心解决方案：分离运行时环境

Cloudflare Workers 的边缘运行时（Edge Runtime）不完全支持 Node.js 原生模块，而 Server Actions 依赖部分 Node.js API。需采用环境分离策略：

1. API 路由分离法

// 文件: app/api/actions/route.js
export const runtime = 'edge'; // 仅边缘路由使用

export async function POST(request) {
  const formData = await request.formData();
  // 边缘环境兼容的数据处理逻辑
  return Response.json({ success: true });
}

// 文件: components/Form.jsx
'use client';
export default function Form() {
  const handleSubmit = async (formData) => {
    // 调用边缘API路由
    await fetch('/api/actions', {
      method: 'POST',
      body: formData
    });
  };

  return (
    <form action={handleSubmit}>
      {/* 表单内容 */}
    </form>
  );
}

优势：完全兼容 Cloudflare 边缘环境，避免运行时冲突。

---

2. 条件运行时配置

// 文件: app/page.jsx
export const runtime = process.env.CF_PAGES ? 'edge' : 'nodejs';

async function serverAction(formData) {
  'use server';
  // 动态检测环境
  if (process.env.CF_PAGES) {
    // 边缘环境专用逻辑
  } else {
    // 本地/Node环境逻辑
  }
}

注意：需在 Cloudflare 环境变量中设置 CF_PAGES=1。

---

关键兼容性问题与解决

1. Node.js 模块限制

边缘环境不支持 fs、child_process 等模块：

// 错误用法（边缘环境崩溃）
import fs from 'fs';

// 正确替代方案
import { getKVStore } from '@cloudflare/kv'; // 使用Cloudflare KV存储

2. 数据库连接优化

// 本地使用Prisma
import prisma from '@/lib/prisma'; 

// 边缘环境改用D1或HTTP接口
const db = process.env.CF_PAGES 
  ? new D1Database(env.DB) 
  : prisma;

推荐使用 Cloudflare D1 或 RESTful API 替代直接数据库连接。

---

部署配置要点

1. Cloudflare 适配器设置

   # 安装适配器
   npm install @cloudflare/next-on-pages
   
   # 构建命令
   npx @cloudflare/next-on-pages@1

2. wrangler.toml 配置

   [build]
   command = "npm run build && npx @cloudflare/next-on-pages@1"
   upload_dir = ".vercel/output/static"
   
   [[d1_databases]]
   binding = "DB"
   database_name = "my-db"
   database_id = "xxxx-xxxx-xxxx"

参考 Cloudflare 官方示例：Next.js on Cloudflare Pages。

Answer 2

最实用的解决方案是分离架构：

• 页面组件保持 export const runtime = 'edge'
• Server Actions 逻辑迁移到独立的API路由
• API路由不导出runtime配置，使用默认的Node.js runtime