Nextjs 14 App Router How to make 301 Redirect

Question

I have slugs of products in my project. And the slugs are dynamic and can be updated. When it is updated, I want to redirect it to the new one with 301, but I could only redirect it with 308. The code is basicly like this:

export default async function Page({ params: { slug } }: Props) {
  const productData: Promise<Product> = getProduct(slug);

  const product = await productData;

  if (product.slug !== slug) {
    // redirect to the correct slug
    permanentRedirect(`/product/${product.slug}`);
  }
  ...
  ...
}

Apart from that, I tried adding it to the next.config.js file and it still returned 308.

async redirects() {
  return [
    {
      source: '/product/old-slug-example,
      destination: '/product/new-slug', 
      permanent: true,
    },
  ];
},

I tried client-side redirection, but it still didn't work as I wanted.

The main reason I want it to be 301 is SEO. For SEO, people say that 308 will not be enough and that redirecting with 301 is a must.

Answer 1

There is more than one approach to do redirection in next.js but I prefer to do this with next.config.js.

Here is how you can do that in next.config.js:

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/product/:slug',
        destination: async (params) => {
          const product = await getProduct(params.slug);
          if (product.slug !== params.slug) {
            return `/product/${product.slug}`;
          }
          return null; // No redirection needed
        },
        permanent: true, // This should ensure a 301 redirect
      },
    ];
  },
};

You can find more information about this method here