Nextjs change 308 to 301 redirect

Question

My task is to set up a redirect from pages with a trailing slash to a page without a trailing slash through 301 redirects for SEO. By default, nextjs has a 308 redirect configured.

Now:

/catalog/123/ -> /catalog/123 308 redirect
Copy

What I expect:

/catalog/123/ -> /catalog/123 301 redirect
/catalog/99/ -> /catalog/99 301 redirect
Copy

I'm trying to do it this way. What is my mistake?

module.exports = {
  async redirects() {
    return [
      {
        source: '/catalog/:slug/',
        destination: '/catalog/:slug', 
        statusCode: 301,
      },
    ]
  },
}
Copy

I have seen that it is possible to configure redirect in getServerSideProps, but in my case it is getStaticProps.

upd: Code project example https://stackblitz.com/edit/nextjs-g2zvta?file=pages/posts/[id].js

Link example. posts/1/ redirect to posts/1 with 308 https://nextjs-g2zvta--3000.local.webcontainer.io/posts/1/

Answer 1

GetStaticProps() only runs at build time. You have to organize middlewares for redirects on static pages. Unlike the config you have (almost) full control over the response stats in there.