Next.js Static Export Blank Page on Cloudflare Pages

Next.js static export blank page on Cloudflare Pages is uniquely disorienting because the build log gives you nothing to work with — every step reports success, there's no error to search for, and the deployed URL just... doesn't show anything. Not a 404, not an error boundary, just white space. A successful build and a working deployed site are two separate claims, and this bug lives entirely in the gap between them: the build genuinely succeeded, and something about what Cloudflare actually publishes or how the browser resolves what it published is wrong.

Short answer: check the Build output directory setting in Cloudflare Pages first — it needs to match exactly where next build with output: 'export' actually writes files (out by default, or your configured distDir), and if that's already correct, check the browser's Network tab for failed JavaScript or CSS requests caused by a trailingSlash mismatch between what your export generated and what Cloudflare's routing expects.

The Most Common Cause: Wrong Build Output Directory

Cloudflare's own deployment guide for static Next.js sites specifies the build directory setting directly as out for a standard static export. Next.js writes every generated HTML, CSS, and JS file into that folder when output: 'export' is set — nowhere else, and nothing about the build process automatically tells Cloudflare which folder actually holds the output. If the Cloudflare Pages project's Build output directory setting points at anything else — a leftover default from before static export was configured, or a typo from copying settings between projects — the build itself completes without error, and Cloudflare faithfully publishes an empty or incorrect folder. The deploy log shows success because, from the build tool's perspective, it was one.

(If you've been re-triggering the deploy hoping a second attempt catches something different — it won't. The build isn't flaky here. It's correctly building the right files into the right folder; Cloudflare is just looking somewhere else for them.)

Fix: Confirm the Output Directory Matches Your Actual Config

Check next.config.js for whether distDir is customized:

1// next.config.js
2module.exports = {
3  output: 'export',
4  // distDir: 'dist', // only if you've explicitly changed it — otherwise it's 'out'
5};

Then confirm Cloudflare Pages' project settings under Build output directory match exactly — Cloudflare's own build configuration reference documents exactly where this setting lives and how it interacts with the build command — out unless you've deliberately renamed it, in which case that exact custom value needs to be reflected on the Cloudflare side too. This single mismatch, more than any code issue, accounts for a large share of "successful build, blank site" reports.

The Second Cause: trailingSlash Mismatches Breaking Asset Paths

If the output directory is confirmed correct and the page is still blank, Next.js's trailingSlash configuration reference is specific about what this setting actually changes: with it set to true, a route exports as /me/index.html instead of /me.html. That structural difference matters because it changes how relative asset paths resolve depending on the exact URL shape a browser requests. If your export used one structure but a link, redirect, or Cloudflare's own routing assumes the other, the HTML document itself can load successfully while the JavaScript and CSS it references — using paths that assumed a different URL depth — fail to resolve. The page renders as blank not because nothing loaded, but because nothing executable loaded: an empty root div with no script ever successfully attached to it.

Checking the Browser Console for the Actual Failing Request

Rather than guessing between these two causes, open the deployed URL directly and check the Network tab:

1# What to look for in DevTools → Network, on the live deployed URL
21. Reload the page with DevTools open
32. Filter by "Fetch/XHR" and "JS" — look for anything red (404, failed)
43. Note the exact path requested — does it match a real file in your `out` folder?

If literally everything 404s, including the base HTML document itself, that points at the output-directory cause — Cloudflare has nothing at all to serve. If the HTML loads (visible in the Elements panel, populated but unstyled and non-interactive) while specific .js or .css requests fail, that's the trailingSlash/asset-path mismatch, and the exact failing path tells you precisely which structure your links or redirects are assuming incorrectly.

The Opinion Part

Here's the position worth stating plainly: a green checkmark on a build log is a claim about the build process, not a claim about the deployed product working — and treating them as the same thing is exactly how "the build succeeded" and "the site is blank" end up feeling like a contradiction instead of two separate facts that are both true at once. The fix here is never about making the build "more successful." It's about verifying the thing the build produced is actually the thing being served, at the paths the browser is actually requesting. That's a five-minute check in DevTools that replaces however long you'd otherwise spend re-triggering an already-correct build.

Conclusion

If a Next.js static export shows a blank page on Cloudflare Pages, don't trust the green build log as proof the site is actually working. Confirm the Build output directory setting matches where your export genuinely writes files — out by default — and if that's already right, check the Network tab on the live URL for the specific failing asset request, which will point directly at a trailingSlash or path mismatch between what your export generated and what Cloudflare is trying to serve.

If middleware or a specific adapter choice on Cloudflare is a separate concern on the same project, our Cloudflare Pages middleware guide covers that related but distinct platform quirk, and if the deeper question is which Next.js features actually survive static export at all, our dynamic server usage guide covers that broader list.

Point the platform at the folder the build actually filled, match the URL structure the export actually generated, and let the blank page turn back into the site you built.