[next.js] SSR でデバイスの種類を取得したい

SSR では window.Navigator.userAgent が使えない

クライアント側でデバイスの種類を取得したい場合は window.Navigator.userAgent を使用すればいいけれども、SSR 時は当然ながら window オブジェクトが存在しないので window.Navigator.userAgent を使用することはできない。

getServerSideProps の context から request.headers 内の user-agent を取得する

import { NextPageContext } from 'next';

export async function getServerSideProps(context: NextPageContext) {
  try {
    // この userAgent を使えばどうとでも判断できる
    const userAgent = context.req.headers['user-agent'];
    return ({ props: {}});
  } catch (e) {
    console.error('[error] / SSR error', e)
    return {
      notFound: true,
    };
  }
}

実装編

使用するライブラリ

• ismobilejs: ^1.1.1

$ npm i ismobilejs

実装

import { NextPageContext } from 'next';
import ismobile from 'ismobilejs';

type PropsType = {
  isMobile: boolean,
}

const TestPage = (props: PropsType) => {
  const { isMobile } = props;
  return (
    isMobile ? (
      <>mobile page</>
    ) : (
      <>desktop page</>
    )
  );
};

export default TestPage;

export async function getServerSideProps(context: NextPageContext) {
  try {
    // userAgent 取得
    const userAgent = context.req.headers['user-agent'];
    // mobile かどうか
    const isMobile = ismobile(userAgent).any;
  
    return {
      props: {
        isMobile,
      }
    }
  } catch (error) {
    console.error('error in getServerSideProps !!', error);
    return {
      notFound: true,
    };
  }
}

おわり

いったんこれで大丈夫そうかな。