react-device-detectでPC/モバイル判定を行う

公開日時

react-device-detectを使うと手軽にPC/モバイルの判定ができる。

  • インストール
yarn add react-device-detect
  • 使い方

isMobile を使うとモバイル判定ができる

import { isMobile } from "react-device-detect"

export const Some = () => {
  return (
    <>
      <p>some content</p>

      {isMobile ? (
        <p>this is mobile only content</p>
      ) : (
        <p>this is pc only content</p>
      )}
    </>
  )
}

BrowserView, MobileView を使うとPC, モバイルの場合のみchildrenのコンポーネントを表示することもできる。

import { BrowserView, MobileView } from "react-device-detect"

export const Some = () => {
  return (
    <>
      <p>some content</p>

      <MobileView>
        <p>this is mobile only content</p>
      </MobileView>

      <BrowserView>
        <p>this is pc only content</p>
      </BrowserView>
    </>
  )
}

Related #next.js

SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

クロスオリジン分離対応を実施

VercelのPreview環境に固定のサブドメインを割り当てる

X-Robots-Tagは付与されないので注意

react-hook-formとReact Datepickerを組み合わせる

Hook FormのControllerを使う

next exportで書き出した静的サイトのconsoleに _next/data/xxx/.json 404エラーが出力される

Next.jsバージョンをv10.0.4にアップデートした