How to handle 301 redirects in Next.js?

@alvera_smith 

Handling 301 redirects in a Next.js application can be accomplished through the configuration in your next.config.js file. Here’s a step-by-step guide on how you can set up 301 redirects:

1. Open or create the next.config.js file: This file is typically found at the root of your Next.js project.
2. Add a redirects function: This function is an asynchronous function where you can specify your redirects configurations.
3. Specify your redirects: Each redirect needs to be defined with a source path, a destination path, and a permanent flag (set to true for 301 redirects).

Here is an example of how you can set this up:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-path',  // the path you want to redirect from
        destination: '/new-path',  // the path you want to redirect to
        permanent: true, // this signifies a 301 permanent redirect
      },
      {
        source: '/another-old-path', 
        destination: '/another-new-path',
        permanent: true, 
      },
      // you can add more redirects as needed
    ];
  },
};

Key Points:

• source: This represents the old path that you want to redirect. You can use dynamic path segments and URL parameters here if needed.
• destination: This is the new path to which the traffic should be redirected.
• permanent: A boolean flag to indicate whether the redirect is permanent (true for a 301 redirect) or temporary (false for a 302 redirect).
• Dynamic routes: You can also use dynamic segments, such as source: '/old-blog/:slug' and destination: '/new-blog/:slug'.
• After adding the redirects, make sure to restart your Next.js development server to apply the changes.

These configurations ensure that when a user or search engine bot hits the source URL, they're automatically redirected to the destination, and since it's a permanent redirect, search engines are instructed to update their index for the resource.

By setting up the redirect this way, Next.js will natively handle the redirect for optimization, and during the build process, the necessary HTTP redirect rules will be generated automatically.