A set of elegant, out-of-the-box Cloudflare WAF Custom Page Templates implemented using Next.js, Tailwind CSS, and HeroUI. Built with Next.js 15, TypeScript, and Tailwind CSS, featuring responsive design, dark mode support, and automatic Cloudflare variable replacement.

English | 简体中文 | Online Demo

Main Page

Example Page	Light Mode	Dark Mode
IP Block
JS Challenge
500s Error

• 🎨 Modern Responsive Design: Sleek and contemporary layout optimized for all devices.
• 🌙 Dark Mode Support: Automatically adapts to system preferences for comfortable viewing.
• 🔒 Full Coverage of Cloudflare Page Types:
  • Block: WAF interception pages
  • Error: 1000s / 500s error pages
  • Captcha: CAPTCHA challenge pages
• 📱 Mobile-First Approach: Guaranteed smooth experience on mobile devices.
• 🎭 Automatic Cloudflare Variable Replacement: Seamless integration of Cloudflare-specific variables.

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

Currently supported automatic variable replacements:

• ::CLIENT_IP:: - Client IP Address
• ::RAY_ID:: - Cloudflare Ray ID
• ::GEO:: - Client Geolocation
• ::CLOUDFLARE_ERROR_500S_BOX:: - 500s Error Page Component
• ::CLOUDFLARE_ERROR_1000S_BOX:: - 1000s Error Page Component
• ::CAPTCHA_BOX:: - Cloudflare CAPTCHA Component
• ::IM_UNDER_ATTACK_BOX:: - Cloudflare JavaScript Challenge Component

Quickly access Cloudflare Custom Pages via this link.

• Deploy to Vercel (Recommended):

  

• Manual Deployment:

  bun run build
  # Ignore the following command if using Nginx/etc.
  bun run start

  bun run start launches a local server using serve@latest, listening on 0.0.0.0:3001 by default.

0. Install Bun:

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

1. Clone Repository:

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

2. Install Dependencies:

   bun install

3. Start Dev Server:

   bun dev

4. Build Production Version:

   bun run build

Modify fields in ./config/site.ts (name, description, etc.).

Translations of all texts can be modified in . /config/i18n.ts to change the translation of all texts (TODO: multi-language support).

To change the page text, edit . /config/i18n.ts:

export const blockPageTranslations = {
    ip: {
        title: "Access Denied - IP Blocked",
        message: "The owner of this website has banned your IP address.",
    },
    // ... more translations
};

To modify page configurations (without text content), edit ./config/routes.ts:

export const blockPages = {
    ip: {
        type: "ip",
        code: "1006",
        icon: "shield-ban",
        networkStatus: {
            clientStatus: "error",
            edgeStatus: "success",
        },
    },
    // ... more configurations
};

Project structure:

components/
├── cf/        # 🌩️ Cloudflare Components
├── home/      # 🏠 Homepage Components
└── layout/    # 🖼️ Global Layout Components

This project utilizes the lucide-react icon library. To optimize the project's size, we have encapsulated a unified entry point and on-demand loading component called Icon.

You can follow the steps below to add or replace icons:

1. Check if the icon you want to use is not already listed in ./config/icons.ts. If it exists, skip directly to step 5.

2. Visit the Lucide icon library and select your preferred icon.

3. Click the Copy Component Name button to copy the icon's name.

4. Then, navigate to ./config/icons.ts and follow the instructions to add the icon name to:

   1. import { ... Component } from "lucide-react" (import the icon component)
   2. export type IconKey = ... (add the icon name to the type list)
   3. export const icons = { ... } (add the icon name to the mapping dictionary)

5. Finally, use the desired icon in ./config/routes.ts.

Licensed under GPL v3.0. See LICENSE for details.