Redirect IE11 users in NextJS
Tags: nextjs, webdev
Published: 2021-06-17 19:32:36

A while ago, a client I work for decided after a lot of discussions to finally drop support for IE11. _Hurray!_

Later, they decided to a show a nice page with an explanation to anyone who might still be using IE11 and encourage them to download a more modern browser.

But because we dropped support a while ago, we didn't test in IE11 anymore, and so any page we tried to load didn't work. Trying to make the pages work would be a waste of time, because in time they might stop working again.

So we decided to redirect all IE11 users to a simple static page.

## Redirects in NextJS

Since version 9.5 it is possible to [declare your redirects](https://nextjs.org/docs/api-reference/next.config.js/redirects) in `next.config.js`.

The `redirects` property accepts an async function, that returns an array of redirects.

The redirect in this array goes from the homepage to `/ie_warning.html` (which is a file served from the `public` folder), and is set to be non-permanent, meaning that the server will return a `302` HTTP status code. If `permanent` is set to `true`, a `301` code is returned instead.

```typescript
module.exports = {
  redirects: async () => {
    return [
      {
        source: '/',
        permanent: false,
        destination: '/ie_warning.html',
      },
    ]
  },
}
```

After restarting NextJS, the homepage should redirect you to the static file. But right now this will happen in all browsers, which is not what we want.

## Matching the User-Agent header

So what if we only want to redirect users that are using IE11?

That's easy! Redirects also accept a [has](https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-matching) property, that contains a list of "things" the request should contain. These can be headers, cookies or query parameters.

We will be checking against a header. The `User-Agent`. All IE11 user-agents contain the word [Trident](<https://en.wikipedia.org/wiki/Trident_(software)>) in their user-agent, so we can simply use a regex-like string to check if the header contains that word.

```typescript
module.exports = {
  redirects: async () => {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value: '(.*Trident.*)',
          },
        ],
        permanent: false,
        destination: '/ie_warning.html',
      },
    ]
  },
}
```

Restart NextJS again, and go to the homepage in IE11. It will still redirect you, while other browsers will not.

But right now the redirect only triggers on the homepage. You'll want this to trigger on all pages, which we'll do next.

## Site-wide redirect

In order to trigger a redirect on all pages, we can make use of a regex-like string again.

```typescript
module.exports = {
  redirects: async () => {
    return [
      {
        source: '/:path((?!ie11_warning.html$).*)',
        has: [
          {
            type: 'header',
            key: 'user-agent',
            value: '(.*Trident.*)',
          },
        ],
        permanent: false,
        destination: '/ie11_warning.html',
      },
    ]
  },
}
```

Restart NextJS one more time and now the redirect will trigger on all pages, except `/ie_warning.html`. The exception is required to prevent a redirect loop.

## Conclusion

As you can see, it is quite easy to setup a redirect for a specific browser. Personally I had some trouble with the regex-like strings at first, but then again, regex is difficult anyway.

Hope this was helpful!