cf_onlinelisted
Install: claude install-skill weiyi88/cc-code
# Cloudflare Pages 上线技能
将 Next.js (App Router) 项目部署到 Cloudflare Pages Edge Runtime，包含完整的预检、构建、部署、域名配置流程。
## 适用场景
- Next.js App Router 项目部署到 Cloudflare Pages
- 已有 GitHub 仓库，需要上线到 Cloudflare
- 需要为 Cloudflare Pages 配置自定义域名
---
## 完整流程
### Phase 0: 预检（必做）
部署前必须检查以下项目配置，逐项修复：
#### 0.1 wrangler.toml
确认项目根目录存在 `wrangler.toml`，内容必须包含：
```toml
#:schema node_modules/wrangler/config-schema.json
name = "<project-name>"
compatibility_date = "2024-12-01"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"
```
- `name`：项目名（小写，将作为 `<name>.pages.dev` 子域名）
- `compatibility_flags`：**必须**包含 `nodejs_compat`，否则运行时 503 错误
- `pages_build_output_dir`：**必须**设置，否则 wrangler 不会应用 compatibility_flags
#### 0.2 next.config.mjs
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
unoptimized: true, // Cloudflare Pages 不支持 Next.js 图片优化
},
// 注意：不要设置 output: 'export'，@cloudflare/next-on-pages 会处理输出格式
};
export default nextConfig;
```
#### 0.3 Edge Runtime 声明
所有动态页面和 API 路由**必须**添加 Edge Runtime 声明：
```typescript
// app/page.tsx
export const runtime = 'edge';
// app/api/xxx/route.ts
export const runtime = 'edge';
// app/generator/[param]/page.tsx
export const runtime = 'edge';
```
**⚠️ 关键限制（Next.js 15）：**
- `export const runtime = 'edge'` 和 `generateStaticParams` 不能共存
- 选择 edge runtime 就必须是动态渲染，放弃静态生成
- `params` 类型变为 `Promise<{...}>`，需要 `await params`
```typescript
// Next.js 15 正确写法
ex