https://github.com/027xiguapi/next-cloudflare-template
https://github.com/027xiguapi/next-cloudflare-template
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/027xiguapi/next-cloudflare-template
- Owner: 027xiguapi
- License: mit
- Created: 2025-05-26T06:23:50.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-05-26T06:48:10.000Z (4 months ago)
- Last Synced: 2025-05-26T08:44:55.567Z (4 months ago)
- Language: TypeScript
- Size: 516 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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. 克隆仓库：
```bash
git clone https://github.com/Shiinama/next-cloudflare-template
cd next-cloudflare-template
```
2. 安装依赖：
```bash
pnpm install
```
3. 修改配置文件
在 `wrangler.jsonc` 设置 Cloudflare D1 数据库名以及数据库 ID
4. 设置环境变量：
```bash
cp .env.example .env.local
```
设置 NEXT_PUBLIC_BASE_URL, AUTH_SECRET
5. 创建本地数据库表结构：
```bash
pnpm db:migrate-local
```
6. 本地运行：
```bash
pnpm run dev
```
## 🌍 部署到 Cloudflare Pages
1. 执行《🚧 开发》中的步骤 1~4
2. 创建远程数据库表结构：
```bash
pnpm db:migrate-remote
```
3. 部署：
```bash
pnpm run deploy
```
## ❓ 常见问题
- 如何获取 `CLOUDFLARE_ACCOUNT_ID` 和 `CLOUDFLARE_API_TOKEN`？
1. 登录 [Cloudflare 控制台](https://dash.cloudflare.com)
2. 复制如图所示的值，这就是 `CLOUDFLARE_ACCOUNT_ID`
3. 点击右上角小人图标，选择配置文件
4. 在左边的菜单选择 API 令牌
5. 创建一个自定义令牌，这就是 `CLOUDFLARE_API_TOKEN`
6. 该 token 只会显示一次，请妥善保存
## 💡 贡献
欢迎提交 Pull Request 或者 Issue 来帮助改进这个项目
## 📄 License
本项目采用 [MIT](LICENSE) 许可证