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.