404 in prod but fine locally?

[special-character]

I added a getInitialProps in the _document component in order to add redirects on the server side like this:

  static async getInitialProps(ctx: NextPageContext) {

    ...

    const url = ctx.req?.url
    if (ctx && ctx.res && url && redirects[url]) {
      ctx.res.writeHead(302, { Location: redirects[url] })
      ctx.res.end()
    }

    ...

  }

Locally, this redirects when I go to a route in the redirects, however in the built application I get a 404. Does anyone know why the built app would behave differently than when in local development? I don't understand why this would be different and why the lifecycle seems different?

[rafaelalmeidatk]

I am not sure about the issue from _document, but you can try to use the experimental rewrites feature to create the redirects in a cleaner way:

// next.config.js

module.exports = {
  experimental: {
    async rewrites() {
      return [
        {
          // redirect from page-a to page-b
          source: '/page-a',
          destination: '/page-b',
        },
      ]
    },
  },
}

[special-character]

Thanks, I will give that a try

[special-character]

Thanks for the suggestion on that but I think my use case isn't supported yet:

Error: Rewrites don't support auto-exported dynamic pages yet. Using this will cause the page to fail to parse the params on the client

[enricoschaaf]

Is the page you expect to redirect statically generated? If it is it wont work with getInitalProps in the custom document. What problem do you try to solve with this? Because permanent redirects should not be handled by your application, it should be handled by your proxy.

[chrisdrackett]

we're hosted on Vercel, so I'm not sure how to configure the proxy.

The problem we're trying to solve is that we have routes like /blog/ that don't have a page on them. The /blog/ page we want directed to /. We are currently doing this with an index.ts page in blog, but were thinking it would be nice to be able to do with without a lot of extra index pages that only handle a redirect.

[enricoschaaf]

its petty simple just add a vercel.json and configure it like this
{ "routes": [ { "src": "/blog/(.*)", "status": 301, "dest": "/" } ] }