为了投入AI的怀抱，将Nextjs项目从Vercel迁移到了CF，结果是好的，过程是痛苦的

天下苦Vercel久矣

这应该是每个使用Nextjs开发一直想说的话，我在这里帮大家喊出来 🎺。

很多人使用Nextjs都直接部署到Vercel上，方便又快捷，一键部署爽歪歪，不过说实话，没有特别的要求它是真的舒服。

但是！！！

如果你想要做AI项目而且是白嫖党，vercel是有限制的，接口默认10s，最高60s的返回，一些久一点的接口，就直接废了，升级高达20美金，这是钱的问题吗？这是命！！！

最近在研究一些AI集成，就被这个问题卡住了，最后发现了赛博菩萨CloudFlare的存在，决定将项目部署到CF上。

蛋疼的edge runtime

因为项目的技术栈是supabase、prisma、nextjs，所以想要迁移到cf上需要对项目进行几个改造。

1.首先是nextjs的改造。

安装对应的cf库

js 复制代码

pnpm add -D @cloudflare/next-on-pages

然后添加一个项目信息文件，2. wrangler.toml

ini 复制代码

name = "filetohtml"
compatibility_date = "2025-03-22"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

然后在nextjs.config.js添加下面的内容

js 复制代码

import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";

if (process.env.NODE_ENV === "development") {
  await setupDevPlatform();
}

\\ ...你原本的内容

2.prisma和supabase的结合使用问题，因为prisma链接postresql时使用了pg相关的库，在edge runtime时是无法使用的，所以需要将其改为所有数据库调用都使用supabase.js。

这也是一个大工程，supabase是支持edge运行的，那么我们要用supabase作为数据库调用工具，不能使用prisma orm了。

js 复制代码

import { createClient } from "@supabase/supabase-js";  
  
export function getSupabaseClient() {  
  const client = createClient(  
    process.env.SUPABASE_URL || "",  
    process.env.SUPABASE_ANON_KEY || ""  
  );  
  
  return client;  
}

3.nextjs的问题，根据文档来弄，需要将所有的route和page添加代码。

js 复制代码

export const runtime = "edge";

指定在edge上运行。

4.添加命令行

js 复制代码

"pages:build": "pnpm dlx @cloudflare/next-on-pages@1",
"preview": "pnpm pages:build && wrangler pages dev",
"deploy": "pnpm pages:build && wrangler pages deploy"

因为我的项目是用pnpm下包的，所以也要使用pnpm部署，这个要切记，用cf默认的部署命令是npm，有可能会出现部署问题。

部署设置按照图来设置。

舒服的cf

部署到cf之后，调用ai接口就没有限制问题了。

cf还有很多免费的功能，dns、安全、d1数据库等等一大堆功能，满足大部分的需求。

最后

附上这周集成ai功能做的一个小项目---文件生成html