A bit of an odd one...

I've specified a redirect path for the root index page for one of my projects. It worked no problem and redirected me to the correct path, but now it redirects me to that same path for the root index page for all of my other projects. (trying to visit localhost:3000 now redirects me to localhost:3000/ggp for all of my projects)

I've tried restarting servers, deleting the next.config.js file in the original project, menting out the redirect key, overriding it with a different path in both the original project and in the other project but all to no avail.

This is the first time I've created a next.config.js file and obviously the first time using the redirect key. I was following the guidance in the docs (.config.js/redirects).

At first I thought it might be because I set permanent to true, but that would seem like a bit of a weird feature to make it global and when I run a different project in dev mode (next dev) and debug, everything works normally as it should. So I'm not sure if the value just got cached on first use or something.

Has anybody encountered this before / know a way of fixing it? I'd appreciate your help!

The original next.js.

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

A bit of an odd one...

I've specified a redirect path for the root index page for one of my projects. It worked no problem and redirected me to the correct path, but now it redirects me to that same path for the root index page for all of my other projects. (trying to visit localhost:3000 now redirects me to localhost:3000/ggp for all of my projects)

I've tried restarting servers, deleting the next.config.js file in the original project, menting out the redirect key, overriding it with a different path in both the original project and in the other project but all to no avail.

This is the first time I've created a next.config.js file and obviously the first time using the redirect key. I was following the guidance in the docs (https://nextjs/docs/api-reference/next.config.js/redirects).

At first I thought it might be because I set permanent to true, but that would seem like a bit of a weird feature to make it global and when I run a different project in dev mode (next dev) and debug, everything works normally as it should. So I'm not sure if the value just got cached on first use or something.

Has anybody encountered this before / know a way of fixing it? I'd appreciate your help!

The original next.js.

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

• javascript
• node.js
• next.js
• next-router

2 Answers 2

Turns out the problem was that when you set the permanent key to true, it caches the redirect route in the browser (at least it does in Google Chrome), so that redirect route is used for all requests to that path, regardless of which project is active.

Clearing the browser cache and switching the permanent key to false, solves the issue for me (I just opened up the inspector, went to the network tab, right clicked in the network request table and selected "clear browser cache").

It seems like a weird feature to me, especially since it's use seems pretty ambiguous in the docs (although it may be mentioned somewhere that I haven't looked).

Anyway, lesson learned: Test the issue in another browser before tearing your hair out :')

1. Press Clear site data button on center-bottom on screenshot;
2. Press Empty cache and hard reload (when DevTools is opened);

My env: Next.js v13.5.3, MacOS, M1, Chrome v117.