3

NextJs - I am trying to redirect from /index.html to / URL using below code,

module.exports = {
 async redirects() {
   return [
    {
      source: '/index.html',
      destination: '/',
      permanent: true,
    },
   ]
 },
}

By referring https://nextjs.org/docs/api-reference/next.config.js/redirects. Right now redirect is working fine but its sending status code as 308 but I want it as 301. And it should be SEO friendly.

Eg: When user hits https://www.example.com/index.html then it should redirect to https://www.example.com with 301 status.

How can I fix this?

Shruthi R
  • 1,863
  • 4
  • 39
  • 77
  • why do you have index.html file in the first place? Can you add some more info explaining your use case – OMi Shah Aug 29 '22 at 06:44
  • There is a requirement like when user hits `https://www.example.com/index.html` then it should redirect to `https://www.example.com` with 301 status – Shruthi R Aug 29 '22 at 06:51
  • You shouldn't worry about the status code, both treated alike as per Google. – OMi Shah Aug 29 '22 at 07:27
  • and if you insist with 301, you should be doing via apache virtual host or .htacess / nginx conf – OMi Shah Aug 29 '22 at 07:29

1 Answers1

1

In Next.js, we can list all the redirections inside the next.config.js file.

Assume that the old path is /old-page and the new path is /new-page. Then the redirection code will be coded like below.

adding the attribute permanent: true will make the redirection a status code of 301.

next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ]
  },
}

If you are passing a query to the destination path then next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page/:path*',
        destination: '/new-page/:path*',
        permanent: true,
      },
    ]
  },
}

For example when /blog1/post-1?user=test is requested, the user will be redirected to /blog/post-1?user=test.

Path matching

If we have the slug or id or any values, that changes in our URL we can match the paths and redirect from the old path to the new path.

For example, if we have written a redirection code from /old-blog/:slug to /new-blog/:slug, the change in slug will now affect the redirection.

That means, the path /old-blog/post-1 will redirect to the new path /new-blog/post-1.

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/new-blog/:slug',
        permanent: true,
      },
    ]
  },
}

More redirections such as with i18n support are listed on the official Next.js page. You have to refer it here.

Sukumar
  • 69
  • 9
  • Same way I tried but I can see `index.html` with `308` status. – Shruthi R Aug 29 '22 at 07:16
  • ``permanent true or false - if true will use the 308 status code which instructs clients/search engines to cache the redirect forever, if false will use the 307 status code which is temporary and is not cached.`` @ https://nextjs.org/docs/api-reference/next.config.js/redirects – OMi Shah Aug 29 '22 at 07:24
  • @ShruthiR Also from the link above: _"Next.js uses the 307 temporary redirect, and 308 permanent redirect status codes to explicitly preserve the request method used."_. Also, see https://stackoverflow.com/questions/42136829/whats-the-difference-between-http-301-and-308-status-codes. – juliomalves Aug 29 '22 at 11:39