Alert IE Users: Display Warning Message with Next.js

Question

Alert IE Users: Display Warning Message with Next.js

My Next.js application is experiencing issues on Internet Explorer.

When accessed using IE, the app displays a blank screen and generates syntax errors in the console.

Although it's understandable given that IE is being phased out, I want to prevent the problematic code from executing specifically for this browser.

Referencing this solution, I can identify if the user is using IE:

if (window.document.documentMode) {
  // IE detected

  document.write('IE is not supported. Please switch to a more modern browser!')
}

By implementing the code snippet above, users who use IE will be informed about why the site isn't functioning properly instead of encountering a blank screen.

However, there are two interrogations regarding this approach:

Where should the aforementioned code be placed within Next.js?
Is it feasible to terminate the application after running this code, or is there an alternative approach?

Any assistance on this matter would be highly appreciated.

javascript internet-explorer browser next.js

Answer 1

Answer №1

If you want to display a message warning about using an outdated or unsupported browser in your Next.js app, it's best not to rely on the app itself as it may crash due to lack of polyfills on those browsers.

A better approach is to load a JavaScript script asynchronously that doesn't use ES5+ features, ensuring compatibility with all browsers without slowing down your app or increasing bundle size.

The earliest place to check the browser is in _document.js, which is rendered once on the first page request. You can either include this script from an external CDN or create a file called checkBrowser.js in the public folder.

Here is an example of how you can implement this:

pages/_document.js

export default class MyDocument extends Document {

  ...

  render() {
    return (
      <Html>
        <Head>
          <script async src="/scripts/checkBrowser.js" />
        </Head>

      ...

      </Html>
    )
  }
}

public/scripts/checkBrowser.js

// Check if the browser is Internet Explorer and redirect

if (window.document.documentMode) {

  window.location.replace('/outdated.html')
}

public/outdated.html

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Unsupported browser</title>
  </head>
  <body>
    <p>Internet Explorer (IE) is not supported. Please use a modern browser.</p>
  </body>
</html>

Credit: Script from CDN, Redirect approach, also @YuZhou for sharing those links

Answer 2

If you want to display a message warning about using an outdated or unsupported browser in your Next.js app, it's best not to rely on the app itself as it may crash due to lack of polyfills on those browsers.

A better approach is to load a JavaScript script asynchronously that doesn't use ES5+ features, ensuring compatibility with all browsers without slowing down your app or increasing bundle size.

The earliest place to check the browser is in _document.js, which is rendered once on the first page request. You can either include this script from an external CDN or create a file called checkBrowser.js in the public folder.

Here is an example of how you can implement this:

pages/_document.js

export default class MyDocument extends Document {

  ...

  render() {
    return (
      <Html>
        <Head>
          <script async src="/scripts/checkBrowser.js" />
        </Head>

      ...

      </Html>
    )
  }
}

public/scripts/checkBrowser.js

// Check if the browser is Internet Explorer and redirect

if (window.document.documentMode) {

  window.location.replace('/outdated.html')
}

public/outdated.html

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Unsupported browser</title>
  </head>
  <body>
    <p>Internet Explorer (IE) is not supported. Please use a modern browser.</p>
  </body>
</html>

Credit: Script from CDN, Redirect approach, also @YuZhou for sharing those links

Alert IE Users: Display Warning Message with Next.js

Answer №1

Similar questions

Loading data from external URLs using AJAX and JSON

What is the process for converting a JavaScript Date into a Time Zone string?

Utilizing JavaScript to adjust the width of an HTML element

Using a custom filter in AngularJS allows for seamless data filtering directly from the initial dataset

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

Redirect Conditions in NextJS

Make sure to invoke the navigate() function within a React.useEffect() hook, rather than calling it during the initial rendering of

Verify if a window is considered a Popup or not

"Exploring the Synchronization Feature in Vue.js 2.3 with Element UI Dialog Components

Move my site content to the appropriate location

In VueJS and Quasar, what is the best way to retrieve the clicked item in order to pass it to the API?

The conceal feature doesn't appear to be functioning properly on jQuery Mobile

Performing server operations within a client-side component using Next.js

Tips for transferring element attributes to ng-show in AngularJS

Updating the DOM through Long Polling allows us to maintain existing attributes in jQuery Plugin

Find the specific element that is visible within a customized viewport, such as a div or ul

What could be causing Next.js to re-render the entire page unnecessarily?

Exploring Vue.js: Leveraging External JavaScript/JQuery Functions

Shuffle the elements within each container in the DOM

Unexpected Results from WordPress Ajax Request