ruudje

#javascript #nextjs

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 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.

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 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 in their user-agent, so we can simply use a regex-like string to check if the header contains that word.

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.

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!