Fixing 404 URLs on My Cloudflare Pages App Using Next.js Redirects

Recently, I had a small SEO issue on one of my apps.

Some old article URLs had started returning 404 pages after I changed the URL structure. The articles still existed, but I had moved them under a /blog/ path.

The old URLs looked something like this:

/old-article-url
/another-old-article

And the new URLs became:

/blog/old-article-url
/blog/another-old-article

Since some of these pages were already indexed and linked internally, I needed proper 301 redirects instead of leaving them as broken pages.

I must mention, I usually take help from AI tools whenever I get stuck with deployment issues or small technical setups. It saves a lot of time for things that should technically be straightforward.

The app is deployed on Cloudflare Pages and connected to GitHub, so the first method I tried was using a _redirects file.

Cloudflare supports this directly. You create a file named _redirects inside the public folder and add redirect rules like this:

/old-article-url      /blog/old-article-url      301
/another-old-article  /blog/another-old-article  301

I created the file, committed the changes, and Cloudflare automatically triggered a fresh deployment.

But after deployment, the redirects still were not working properly.

That is where I started digging deeper into how redirects are handled in this setup.

Upon checking different discussions and examples, I realized cloudflare pages do supports both _redirects files and framework-level redirects. But for Next.js projects, handling redirects directly inside next.config.ts is generally the recommended approach because Next.js already manages routing during build and deployment.

So instead of relying on Cloudflare-style redirects, the better option here was to use the built-in redirect support from Next.js itself.

The code looked like this:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  allowedDevOrigins: ["localhost", "dev.local"],

  async redirects() {
    return [
      {
        source: '/old-article-url',
        destination: '/blog/old-article-url',
        permanent: true,
      },
      {
        source: '/another-old-article',
        destination: '/blog/another-old-article',
        permanent: true,
      },
    ]
  },
};

export default nextConfig;

If woking locally you will see thus “allowedDevOrigins” with your local IP (dev.local). It tells Next.js which addresses are allowed to access your dev server while coding on your local machine. It has zero effect on your live site.

After that the redirect configuration was added directly inside the app config:

After adding this and deploying again, the redirects started working correctly.

I also removed the _redirects file afterward to avoid managing redirects in two different places.

A few useful things I noticed during this setup:

• Cloudflare Pages supports multiple redirect methods
• _redirects works properly for static sites
• Next.js projects are usually better handled using native framework redirects