This is a set of pre-built, stylish, and functional Cloudflare WAF (Web Application Firewall) custom page templates built using Next.js, Tailwind CSS, and HeroUI.

These templates transform standard Cloudflare security notifications into responsive, professional pages that maintain brand consistency across all security touchpoints.

Features

🔒 Full Coverage of Cloudflare Page Types: Includes templates for Block, Error (1000s/500s), and Captcha pages.

🎭 Automatic Cloudflare Variable Replacement: Integrates Cloudflare variables directly into the templates, eliminating manual configuration.

🌙 Dark Mode Support: Automatically switches between light and dark modes based on the user’s system preferences.

📱 Mobile-First Approach: Prioritizes a smooth and consistent user experience on mobile devices.

Use Cases

Customizing Cloudflare Error Pages

Cloudflare’s error pages can often feel generic. With these templates, developers can create personalized error pages for HTTP 500 and 1000 series errors, displaying customized messages, icons, and styles that align with the website’s branding.

Example: For a server error (500), you can show a friendly message such as “We are working on it!” with a custom design.

Blocking Specific IPs or Threats

This template offers functionality to block specific IP addresses or rate-limited users with customizable block pages. Developers can show a custom page informing the user about the block, offering additional context or options for unblocking.

Example: An IP block page with the message, “Your access is restricted due to security measures.”

Implementing CAPTCHA Challenges

Websites that use Cloudflare for additional protection can use the CAPTCHA challenge page template. This template can be configured to show a customized CAPTCHA page for users identified as suspicious or automated.

Example: When a bot is detected, the site can prompt users with a custom CAPTCHA page that aligns with the website’s theme.

Showcasing Cloudflare JavaScript Challenges

When a website is under attack, Cloudflare’s JavaScript challenge page is shown. Using these templates, developers can modify the page to offer a more polished and user-friendly design.

Example: Display a custom branded page with a progress bar or animation while Cloudflare verifies the user’s traffic.

Rate-Limiting and WAF Block Notifications

Websites using Cloudflare’s rate-limiting feature can use these templates to display customized pages when users exceed the allowed request rate, informing them of the reason and next steps.

Example: A “Rate Limit Exceeded” page with a message like, “You have exceeded the maximum number of requests per minute. Please try again later.”

🛠️ Installation

Deploy to Vercel (Recommended):

Manual Deployment:

Prerequisites:

Cloudflare Pro plan or higher
Node.js environment
Bun package manager

Installation Steps:

Install Bun:

curl -fsSL https://bun.sh/install | bash

Clone the repository:

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

Install dependencies:

bun install

Start development:

bun dev

Usage

Site Configuration: Modify site details like name and description within the ./config/site.ts file.
Content Customization:
- Text Translations: Adjust text content for different pages by editing the ./config/i18n.ts file.
- Page Configurations: Modify page settings (excluding text) in ./config/routes.ts. This includes elements like page type, error codes, and icons.
Component Styling: Customize the appearance of components by modifying files in the components/ directory. The structure is organized into cf/ (Cloudflare components), home/ (homepage components – if applicable), and layout/ (global layout components).
Custom Icons: Add or change icons using the lucide-react library. Update ./config/icons.ts to include new icons and then reference them in ./config/routes.ts.

Related Resources

Cloudflare Custom Pages Documentation
The official guide for implementing custom pages in Cloudflare WAF
Link: https://developers.cloudflare.com/custom-pages/
Next.js Documentation
Comprehensive guide for Next.js framework implementation
Link: https://nextjs.org/docs
Tailwind CSS
Documentation for styling and responsive design
Link: https://tailwindcss.com/docs

FAQs

Q: Do these templates affect WAF security performance?
A: No, the templates only modify the presentation layer without impacting the underlying security mechanisms.

Q: Can I use custom fonts and branding?
A: Yes, the templates support custom styling through Tailwind CSS configuration.

Q: Will the templates work with Cloudflare Enterprise features?
A: Yes, they are compatible with all Cloudflare plans that support custom pages.