More than 3 years have passed since last update.

Next.jsでIEブロックを行う

Posted at 2021-10-26

動作対象外のブラウザ(IE)でアクセスされた際、警告を出したい場合がありました。
Vue.jsの場合は、index.htmlに直に判定文を記述すればよかったのですが、Next.jsでのやり方がわからず苦戦しました。

調べてみると、当然ながらサポートしていないブラウザで動作させるのでNext.jsのアプリケーション内で制御するのはあまり良くなさそうなので、実現方法を考えてみました。
これ以外にも他にもっといい方法があるかもしれませんが、とりあえず残しておきます。

※コードはTypeScriptです。

IE判定

こんな感じでメッセージを出したいが、pages/_app.tsxに記述するとエラーになる。

if (window.document.documentMode) {
  document.write('IEはサポートしていません')
}

_document.tsxの追加

そこで、_document.tsxを利用する。

_document.jsの詳細はこちら

_document.tsx

import NextDocument, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends NextDocument {
  render() {
    return (
      <Html>
        <Head>
          <script async src="./scripts/checkBrowser.js" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

ブラウザの判定ロジックはpublic/scripts/checkBrowser.jsに記述する

checkBrowser.js

if (window.document.documentMode) {
  window.location.replace('../ie.html')
}

IEの場合、メッセージを表示する用のHTML（public/ie.html）を読み込む

ie.html

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Unsupported browser</title>
  </head>
  <body>
    <p>
      InternetExplorer（IE）はサポートされていません。最新のブラウザ（Edge）をご利用ください。
    </p>
  </body>
</html>

まとめ

_document.tsxを利用することで、どのURLにアクセスされてもブラウザ判定が可能

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up