Introduction
Cloudflare Pages provides a fast, globally distributed hosting platform for JAMstack and server-side rendered applications. With built-in support for Next.js, you can deploy static sites, incremental static regeneration (ISR) pages, and server-side rendered routes without managing servers. Combined with an is-pro.dev subdomain powered by Cloudflare's own DNS, you get the tightest possible integration between your hosting and DNS provider.
Prerequisites
- A Next.js application (version 12 or later recommended for full Cloudflare Pages compatibility)
- A GitHub or GitLab account for repository hosting
- A Cloudflare account (free tier)
- An is-pro.dev subdomain registered at dash.is-pro.dev
Step 1: Prepare Your Next.js App for Cloudflare Pages
Cloudflare Pages supports Next.js through the @cloudflare/next-on-pages package, which adapts Next.js for Cloudflare's edge runtime. Install it: npm install @cloudflare/next-on-pages or yarn add @cloudflare/next-on-pages. Update your next.config.js to include the Cloudflare Pages adapter. Configure your build command to use npx @cloudflare/next-on-pages instead of the default next build. This generates an output compatible with Cloudflare's edge infrastructure, ensuring that server-side rendering, API routes, and middleware all work within Cloudflare's Worker environment. For static-only Next.js sites (SSG), you can skip the adapter and use the default build command.
Step 2: Push to Git and Connect to Cloudflare Pages
Push your Next.js project to a GitHub or GitLab repository. Log into the Cloudflare dashboard, navigate to "Workers & Pages", and click "Create → Pages → Connect to Git". Authorize Cloudflare to access your repositories and select your Next.js project. Cloudflare Pages will detect the framework and suggest a build command. For SSG-only projects, the default npm run build works. For projects using the adapter, set the build command to npx @cloudflare/next-on-pages and the output directory to .vercel/output/static. Click "Begin setup" and then "Deploy".
Step 3: Configure Your is-pro.dev Subdomain
In the Cloudflare Pages project dashboard, go to "Custom domains". Click "Set up a custom domain" and enter your full is-pro.dev subdomain (e.g., mynextapp.is-pro.dev). Since is-pro.dev is already on Cloudflare DNS, Cloudflare Pages will detect this and automatically configure the DNS records. No manual DNS changes are needed in the is-pro.dev dashboard — Cloudflare handles both the DNS and the hosting, creating the necessary CNAME record automatically. SSL is provisioned instantly through Cloudflare's edge certificates, which are free and auto-renewing.
Step 4: Enable Edge Caching and Performance Features
Cloudflare Pages automatically caches static assets at the edge across 330+ data centers worldwide. For dynamic routes, you can configure caching rules in the Cloudflare dashboard under "Caching → Configuration". Use Cache Rules or Page Rules to set cache durations for specific URL patterns. Your Next.js ISR pages benefit from Cloudflare's cache, serving stale content instantly while revalidating in the background. You can also enable Cloudflare Web Analytics (free) to track performance metrics like Time to First Byte (TTFB) and First Contentful Paint (FCP) across different geographic regions.
Step 5: Configure Environment Variables and Build Settings
In your Cloudflare Pages project, go to "Settings → Environment variables". Add variables for different environments (Production, Preview). Common Next.js environment variables include NEXT_PUBLIC_API_URL for your API endpoint and NEXT_PUBLIC_SITE_URL for the canonical site URL. Cloudflare Pages supports preview deployments for every branch and pull request, each with a unique URL. You can set different environment variable values for preview deployments to point to staging APIs or databases.
Step 6: Deploy and Verify
Trigger a deployment by pushing to your repository's production branch. Cloudflare Pages builds and deploys your Next.js app, typically within 1-5 minutes depending on project size. Visit your is-pro.dev subdomain in a browser. Navigate between pages to verify that static pages load instantly, dynamic routes render correctly, and API routes respond as expected. Check the browser's Network tab to confirm responses are served from Cloudflare's edge (look for cf-cache-status headers). Test on multiple devices and network conditions to ensure consistent performance globally.
Best Practices
- Use ISR (Incremental Static Regeneration) for content that changes periodically — it combines the speed of static pages with fresh data
- Set sensible cache durations: static assets can be cached for 30+ days, while API responses might need revalidation every few minutes
- Monitor build times and optimize with the Next.js bundle analyzer if deployments take too long
- Use Cloudflare's WAF rules to protect your Next.js API routes from common web attacks
Conclusion
Cloudflare Pages offers one of the fastest hosting platforms for Next.js applications, with tight DNS integration when using an is-pro.dev subdomain. The automatic DNS configuration, instant SSL, and global edge network make this setup ideal for production Next.js applications of any size.
FAQ
Does Cloudflare Pages support Next.js middleware?
Yes, when using the @cloudflare/next-on-pages adapter, your Next.js middleware runs at the edge in Cloudflare Workers for minimal latency.
Can I use a custom domain with the free tier?
Yes, Cloudflare Pages free tier includes custom domain support with unlimited bandwidth and 500 builds per month.
Why is my Next.js API route returning 404?
This usually means the next-on-pages adapter is not configured correctly. Verify your build command and output directory in your Cloudflare Pages project settings, and ensure the adapter package is installed.
FAQ
Is Deployment setup free on is-pro.dev?
Yes, all subdomains on is-pro.dev include free DNS management and SSL certificates.
How long does DNS take to propagate?
Cloudflare typically propagates DNS changes within seconds to a few minutes globally.
Can I use this for commercial projects?
Yes, is-pro.dev subdomains can be used for personal and commercial projects within our fair use policy.