🌐 Cloudflare Custom Pages - Next.js ​

使用 Next.js、Tailwind CSS 和 HeroUI 实现一套美观的、开箱即用的 Cloudflare WAF 自定义页面模板。本模板基于 Next.js 15、使用 TypeScript 和 Tailwind CSS 开发，适配多种设备布局、支持深色模式、自动替换 Cloudflare 变量。

简体中文 | Online Demo

✨ 主要特点 ​

• 🎨 现代化响应式设计：适配各种设备尺寸，使用 Polyfill 技术向前兼容老旧浏览器。
• 🌙 深色模式支持：自动适配系统偏好，支持切换亮/暗色模式。
• 🔒 完整支持所有 Cloudflare 自定义页面类型：
  • Block: WAF 拦截页面
  • Error: 1000s / 500s 错误页面
  • Captcha: CAPTCHA 质询页面
• 🎭 自动替换 Cloudflare 变量：无缝集成 Cloudflare 特定变量到页面中。

📸 截图预览 ​

主页

亮色	暗色
Block from WAF	Block from IP
UAM (Under Attack Mode)	JavaScript Challenge

🛠️ 技术栈 ​

• Next.js 15 + React 19
• HeroUI v2 + Tailwind CSS v3
• TypeScript

🎯 支持变量 ​

目前本模板支持自动替换以下变量：

• ::CLIENT_IP:: - 客户端 IP 地址
• ::RAY_ID:: - Cloudflare Ray ID
• ::GEO:: - 客户端地理位置
• ::CLOUDFLARE_ERROR_500S_BOX:: - 500s 错误页面组件
• ::CLOUDFLARE_ERROR_1000S_BOX:: - 1000s 错误页面组件
• ::CAPTCHA_BOX:: - Cloudflare 的 CAPTCHA 组件
• ::IM_UNDER_ATTACK_BOX:: - Cloudflare 的 JavaScript 挑战组件

🔭 使用指南 ​

可快速点击 这个链接 快速跳转到 Cloudflare 的 Custom Pages 页面。

🌍 部署指南 ​

• 部署到 Vercel (推荐)：

  

• 自行部署：

  bash

  bun run build
  # 如果您使用 Nginx 等程序，请忽略以下命令
  bun run start

  bun run start 会使用 serve@latest 启动一个本地服务器，并默认监听 0.0.0.0:3001。

🚀 开发指南 ​

0. 安装 Bun：

   bash

   # macOS/Linux:
   curl -fsSL https://bun.sh/install | bash
   # Windows PowerShell:
   powershell -c "irm bun.sh/install.ps1 | iex"

1. 下载项目：

   bash

   git clone https://github.com/Alice39s/cloudflare-custom-pages-nextjs.git

2. 安装依赖：

   bash

   bun install

3. 启动开发服务器：

   bash

   bun dev

4. 构建生产版本：

   bash

   bun run build

🎨 自定义指南 ​

1. 自定义站点配置 ​

可修改 ./config/site.ts 中的 name 和 description 等字段。

2. 自定义文案 ​

修改 ./config/routes.ts，示例如下：

// ./config/routes.ts
export type BlockPageConfig = BasePageConfig & {
  type: "ip" | "waf" | "rate-limit";
  code: string;
};

export const blockPages: Record<string, BlockPageConfig> = {
    ip: {
        type: "ip",
        title: "Access Denied (1006)",
        message: "The owner of this website has banned your IP address.",
        code: "1006",
        icon: "shield-ban", // 图标名称, 可参考 `./config/icons.ts` 中的 `IconKey` 类型
    },
    ...
}

• type 用于区分页面路由，若没有前端开发基础，不建议修改。
• title 表示错误页面的标题，可随意更改。
• message 表示页面提示信息，可随意更改，只允许字符串类型。
• code 表示页面错误代码，主要用于首页展示。
• icon 表示页面所用图标，可随意更改，自定义图标可参考 4. 自定义图标 一节。

3. 自定义组件样式 ​

项目结构如下：

components/
├── cf/        # 🌩️ Cloudflare 页面组件
├── home/      # 🏠 首页组件
└── layout/    # 🖼️ 全局布局组件

4. 自定义图标 ​

本项目使用 lucide-react 图标库，为了节省项目体积，封装了一个统一入口、按需引入的组件 Icon 。

你可以根据以下步骤添加/替换图标：

1. 在 ./config/icons.ts 中确定你想要使用的图标不在清单中，如果已存在，则直接跳到第 5 步。
2. 前往 Lucide 图标库，挑选你喜欢的图标。
3. 点击 Copy Component Name 按钮复制图标名称。
4. 随后前往 ./config/icons.ts 按照指引依次将图标名称添加到：
   1. import { ... Component } from "lucide-react" (引入图标组件)
   2. export type IconKey = ... (添加图标名称到类型列表)
   3. export const icons = { ... } (添加图标名称到映射字典)
5. 最后在 ./config/routes.ts 中使用你想要的图标。

📜 许可证 ​

本项目采用 GPL v3.0 许可证开源，详情请参阅 LICENSE 文件。