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

• monikapatelIT: Have you find a way to make it work ?
• davedavedave: It looks like this is a bug / conflict with next-images and next-optimized-images. I've filed an issue here: github.com/twopluszero/next-images/issues/69
• Patrick: As noted below by @Matt, it doesn't appear that the redirects hot-reload, so you'll have to manually bounce your nextjs server.

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.

• James Hooper: And, in my case, the inverse applied: you should ensure that your URLs don't end in a trailing slash (if you haven't configured it to handle it this way)

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

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 4

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

Answer 5

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

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;