NextJS redirects not redirecting urls after define in next.config.js file

Question

I tried to define redirects in my NextJS app. but it is not working.

This is how I tried to do it in my next.config.js file:

const withImages = require('next-images')
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");

module.exports = withPlugins(
    [
        [optimizedImages, {
            inlineImageLimit: 512
        }]
    ],
    {
        async redirects() {
            return [
                {
                    source: "/sales/guest/form",
                    destination: "/",
                    permanent: true
                }
            ]
        },
        env:{
            testEnvVar: 'vallll'
        }
    }
);

This is the documentation of how to do it: https://nextjs.org/docs/api-reference/next.config.js/redirects

Answer 1

For redirects and rewrites to work properly in NextJs, you also need to ensure one more thing:

If you are using trailingSlash: true then your source paths must end with a slash.

{
    source: '/old/:id/',  // Notice the slash at the end
    destination: '/new/:id',
},

Any other plugins or configurations that interfere with routing also need to be taken into account.

Answer 2

you can add all you imports and also const definitions to first array parameter like this

const withPlugins = require('next-compose-plugins');
const css = require('@zeit/next-css');
const less = require('@zeit/next-less');

const nextConfig = {
  target: 'serverless',
  webpack(config, { isServer, webpack }) {
   // al your config
      
    return config;
  },
};

const redirects = {
  async redirects() {
    return [
      {
        source: '/old/blogs/:slug*',
        destination: 'whatever your new rewrite url',
        permanent: true,
      },
    ];
  },
};
module.exports = withPlugins(
  [
    [css],
    [less],
    [redirects], // you can directly drop your redirect rules here 
  ],
  nextConfig
);

Answer 3

What NextJS Version are you on? Redirects are supported from 9.5 upwards

Answer 4

For anyone who has this problem, try restarting the server. The config file will be reloaded then.

Answer 5

In my case, I tried to redirect to external link. I had trailingSlash: true and I ended my source path with slash.

It didn't work because I use Link component from next/link

I changed it to normal a tag and it worked.

Before:

<Link href="/some-path" passHref>
  <a>
   to external
  </a>
</Link>

After:

{/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
<a href="/some-path">
  to external
</a>

You need to disable eslint rule @next/next/no-html-link-for-pages so it won't raise error while building

in next.config.js file:

module.exports = {
  trailingSlash: true,
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/some-path",
        destination: "https://example.com",
        permanent: true,
      },
    ]
  },
}

Answer 6

For anyone struggling with this problem, here is a solution

What the questioner has done in next.config.js is correct and it is stated in the documentation as you will be needing the redirects key to allow incoming traffic to be passed on to the other destination.

So their incoming traffic for the source path is source: "/sales/guest/form"

And prehaps use an if condition if met to redirect to the homepage as they have it in next.config.js, destination: "/"

To complete this you will have to go to the Form page in the pages directory, and address this redirects from the Form page

and import the redirects like below

So basically inside the FORM file inside pages assuming the path through the directories are as:

/sales/guest/form

import { redirect } from 'next/navigation';

const Form = () => {

// prehaps have a condition to tell it when to redirect so:

    // this condition is met whatever
    if (1 === 1) {
        redirect("/");
    }

    // .. rest of the code

}


export default Form;