Deploying Next.js Portfolios to Cloudflare Pages: Static Export & Global Edge Routing
A comprehensive systems administrator guide to configuring Next.js static exports, setting up custom domains, and deploying high-performance web apps on Cloudflare Pages.
Overview
When building high-performance engineering portfolios or technical knowledge bases, hosting architecture plays a critical role in speed, security, and uptime. Cloudflare Pages provides an exceptional global edge network for deploying static web applications with instant cache invalidation, enterprise DDoS mitigation, and automated SSL certificate management.
By configuring Next.js as a static export, administrators can compile React-based portfolio components and Markdown documentation into pure HTML/CSS/JS assets, enabling zero-server maintenance and lightning-fast global content delivery.
---
Step-by-Step: Configuring Next.js for Static Export
Before pushing your site to Cloudflare Pages, Next.js must be configured to generate a fully static build output rather than relying on a Node.js server runtime.
Update Next.js Configuration: Open your `next.config.mjs` (or `next.config.js`) file and add the static export output property to ensure dynamic routes and MDX pages compile down to static HTML files.
Handle Dynamic Routes (`generateStaticParams`): Ensure any dynamic project or knowledge base pages (such as `app/work/[slug]/page.js`) utilize `generateStaticParams()` so the compiler can pre-render every markdown file at build time.
Test the Production Build Locally: Run your local build command (`npm run build`) to verify that the build outputs a static directory without compilation errors or missing asset references.
---
Step-by-Step: Initializing Git and Repository Management
Cloudflare Pages integrates directly with version control platforms to automate deployments on every code commit.
Initialize Git Version Control: Inside your project root directory (`~/your-project-directory`), initialize your local repository and stage your production files by running `git init`, `git add .`, and `git commit -m "feat: initial release"`.
Push to GitHub: Create a new repository on your GitHub account and push your local commits to the main branch. Cloudflare Pages will hook directly into this branch to build and deploy updates automatically.
---
Step-by-Step: Connecting and Deploying on Cloudflare Pages
With your repository pushed to GitHub, connect the project to Cloudflare's edge network:
Access the Cloudflare Dashboard: Log into your Cloudflare account, navigate to the Workers & Pages section in the sidebar, and select Create application > Pages > Connect to Git.
Select Your Repository: Authorize Cloudflare to access your GitHub account and choose your portfolio repository.
Configure Build Settings: Set your build parameters:
Framework preset: `Next.js (Static HTML Export)` or custom build command `npm run build`.
Build output directory: `out` (or your static export directory).
Deploy Site: Click Save and Deploy. Cloudflare will pull your code, execute the build process across its edge nodes, and provide you with a live `*.pages.dev` staging URL.
---
Step-by-Step: Custom Domain & DNS Edge Routing
To bind your professional domain name to your newly deployed Cloudflare Pages site:
Configure Custom Domains: Inside your Cloudflare Pages project settings, navigate to Custom domains and click Set up a custom domain. Enter your target domain name.
Verify DNS Records: Cloudflare will automatically provision or prompt you to create the necessary CNAME routing records pointing your domain to your Pages deployment.
Enforce SSL/TLS Encryption: Navigate to the SSL/TLS tab in your main Cloudflare domain dashboard and ensure encryption mode is set to Full (strict) to guarantee secure, encrypted HTTPS traffic for every visitor.
---
Verification & Ongoing Deployments
Once your custom domain and DNS records propagate:
Push code updates, new Markdown articles, or style refinements to your GitHub repository; Cloudflare Pages will automatically trigger a clean build and deploy the changes globally within seconds.
Monitor edge traffic analytics and security telemetry directly from your Cloudflare dashboard.