🚀 Cloudflare Pages + D1 入门 Demo

使用 Cloudflare Pages 部署前端应用，配合 D1 数据库存储数据 - Next.js SSR 版本

📝 添加留言

💬 留言列表 (1)

12...
123

📦 项目部署信息

🎯 项目信息

项目名称:d1-demo-nextjs
版本:1.0.0
框架:Next.js 14 + React 18
描述:Cloudflare Pages + D1 留言板 - SSR 版本

🔨 构建配置

构建命令:npm run pages:build
输出目录:.vercel/output/static
框架预设:None (Set build command and output directory manually)

🚀 部署配置

部署平台:Cloudflare Pages
数据库:D1 (d1-demo-db)
绑定变量:DB

📋 部署步骤

1. 安装依赖
npm install
安装 Next.js、React 等依赖包
2. 本地开发
npm run dev
启动开发服务器，访问 http://localhost:3000
3. 推送到 GitHub
git add . && git commit -m "xxx" && git push
推送代码到 GitHub 仓库
4. Cloudflare 自动构建
执行 npm run pages:build
使用 @cloudflare/next-on-pages 构建适配边缘运行时的项目
5. 绑定 D1 数据库
Settings -> Functions -> D1 database bindings
在 Cloudflare Dashboard 中绑定 D1 数据库

🔌 API 接口

接口地址:/api/messages
支持方法:GET, POST
文件位置:pages/api/messages.js

💡 工作流程

1
本地开发 (npm run dev)
↓
2
推送代码 (git push)
↓
3
Cloudflare 自动构建
↓
4
自动部署上线