用 Next.js 写了一套开箱即用的 Cloudflare WAF 自定义页面模板

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

🎨 快速预览

亮色	暗色
WAF 拦截页面	500s 错误页面
托管质询页面	JS 质询页面

✨ 主要特性：

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

🛠️ 技术栈

• 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 挑战组件

🔭 使用指南

🔗 点这里 快速跳转到 GitHub 仓库查看使用指南

开源地址: https://github.com/Alice39s/cloudflare-custom-pages-nextjs, 点点 Star 支持一下呗~

🐳 在线预览

🔗 点这里 选择页面类型，快速体验模板效果。

📜 许可证

本项目采用 GPL v3.0 许可证开源，欢迎贡献和二次开发，第一次开源前端项目，如有不足之处，请多多指教。