Removing permanent redirects from next config

  • by
Curvy path arrow

If you have been working with multiple Next.js web apps, and even if one of them has a permanent redirect set in next.config.js then your browser caches it with HTTP 308.

This results in a redirect even for any other website that you are trying to debug locally.

For example, consider your first app MyApp1, has a permanent redirect set for root page to always go to /hello. You can set this redirect in next config like below.

module.exports = {
    async redirects() {
      return [
        {
          source: '/',
          destination: '/hello',
          permanent: true,
        },
      ]
    },
  }

Now once you run your next app with npm run dev and go to localhost:3000 in your browser, it will automatically take you to localhost:3000/hello.

This is all nice and fine as it was our intention for this redirect to work.

Now consider on the same computer, you are trying to work on MyApp2 which does not have any redirects.

If you run this app right now with npm run dev, and browse to localhost:3000, you’d see that your browser still redirects to localhost:3000/hello and this can not be fixed even after doing a hard refresh.

/hello shows 404 page

To solve this in Google Chrome or Firefox, do the following steps

Step 1: Open Developer tools

Step 2: Go to Network Tab

Step 3: Select “Disable Cache”

Step 4: go to localhost:3000 in the same tab

This would disable your permanent redirect and let you visit home page of MyApp2.

Happy coding!

Loading Disqus Comments ...
Loading Facebook Comments ...