Next Cloudflare Template

一个基于 Next.js、Cloudflare Pages 和 Cloudflare D1 数据库构建的模版教学类项目。

✨ 特性

• ⚡️ 基于 Next.js，性能优秀、部署便捷。
• 🎯 支持渲染自定义 React 组件，类似 MDX 体验，内容更灵活。
• 🔍 支持服务器端渲染 (SSR)，增强 SEO 效果。
• 💾 通过 Cloudflare D1 和 Drizzle ORM 实现数据库存储，高效可靠。
• 🎨 UI 采用 Tailwind CSS 和 Shadcn/ui，风格现代、易于定制。
• 🚀 使用 Cloudflare Pages 部署，全球访问快速稳定。

📦 技术栈

• 框架：Next.js、Hono.js
• 数据库：Cloudflare D1、Drizzle ORM
• Markdown 编辑器：Vditor
• Markdown 解析器：markdown-to-jsx
• UI 框架：Tailwind CSS、Shadcn/ui
• 部署平台：Cloudflare Pages

🔑 环境变量

基础配置

• NEXT_PUBLIC_BASE_URL: 项目 URL 地址

认证相关

• AUTH_SECRET: NextAuth Secret，用来加密 session，请设置一个随机字符串

Cloudflare 配置

• CLOUDFLARE_API_TOKEN: Cloudflare API Token
• CLOUDFLARE_ACCOUNT_ID: Cloudflare Account ID
• PROJECT_NAME: Pages 项目名
• DATABASE_NAME: D1 数据库名称
• DATABASE_ID: D1 数据库 ID
• KV_NAMESPACE_NAME: Cloudflare KV namespace 名称，用于存储网站配置（可选，如果不填，则为 next-blog-kv）
• KV_NAMESPACE_ID: Cloudflare KV namespace ID，用于存储网站配置 （可选， 如果不填, 则会自动通过 Cloudflare API 获取）

🚧 开发

1. 克隆仓库：

git clone https://github.com/Shiinama/ai-destiny-tools
cd ai-destiny-tools

2. 安装依赖：

pnpm install

3. 修改配置文件 在 wrangler.jsonc 设置 Cloudflare D1 数据库名以及数据库 ID

4. 设置环境变量：

cp .env.example .env.local

设置 NEXT_PUBLIC_BASE_URL, AUTH_SECRET

5. 创建本地数据库表结构：

pnpm db:migrate-local

6. 本地运行：

pnpm run dev

🌍 部署到 Cloudflare Pages

1. 执行《🚧 开发》中的步骤 1~4

2. 创建远程数据库表结构：

pnpm db:migrate-remote

3. 部署：

pnpm run deploy

❓ 常见问题

• 如何获取 CLOUDFLARE_ACCOUNT_ID 和 CLOUDFLARE_API_TOKEN？

1. 登录 Cloudflare 控制台

2. 复制如图所示的值，这就是 CLOUDFLARE_ACCOUNT_ID

3. 点击右上角小人图标，选择配置文件

4. 在左边的菜单选择 API 令牌

5. 创建一个自定义令牌，这就是 CLOUDFLARE_API_TOKEN

6. 该 token 只会显示一次，请妥善保存

💡 贡献

欢迎提交 Pull Request 或者 Issue 来帮助改进这个项目

📄 License

本项目采用 MIT 许可证