動作対象外のブラウザ(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にアクセスされてもブラウザ判定が可能