What is the best place to redirect based on the user-agent while using ISR?

[michaelschufi]

Hi Next.js community

I have a really, in my view, basic requirement:

I want to redirect a browser to a different site by inspecting its user agent. (IE11 to a special page that tells people to use a proper browser).
I am using ISR with getStaticProps for all of my pages. But since I need to do the redirect on the server side before sending any data to the client (because I do obviously not want to load an incompatible page) I do not know where I should put this logic.

I have used (abused?) _document.tsx for this and check at the top of its getInitialProps if I am on the server and if the user agent matches. Then, I am sending a redirect using res.setHeader('Location', '...').

Is there a better way to do this?

[pke]

This nextjs blog post covers your IE11 case pretty much :)
https://nextjs.org/blog/next-10-2#routing-based-on-headers-and-query-string-parameters

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)'
          }
        ],
        destination: '/old-browser',
        permanent: false
      }
    ]
  }
}

[michaelschufi]

Thank you. As I've already used my described solution, I cannot verify this. But I think that would've worked quite well.

Edit: I will mark it as the answer as soon as the button starts working again...

[rishi-raj-jain]

@pke

The mentioned solution fails to work for me for rewrites.

[pke]

Probably because nextjs changed the way it redirects. The post is 2y old.

[rishi-raj-jain]

So I made it work with rewrites as well: https://github.com/heyxyz/hey/pull/4091/files#diff-a5de0fa0d80f14a44e9bdf2ed5d0cbb3a7bd5fdcacfbc1d03b5dcb57fc4943c1R13-R48

[imran-baitham]

?