[Nextjs] userAgent 에서, 브라우저 환경 구분하는 방법

[Nextjs] userAgent 에서, 브라우저 환경 구분하는 방법

이번 포스팅에서는 userAgent에서 브라우저 환경을 구분하는 방법에 대해 알아보겠습니다.

안드로이드, 아이폰, 오페라 , 윈도우 등 다양한 브라우저 환경이 존재하는데 브라우저에 환경에 따라 다른 코드를 적용해 주어야 할 때가 있습니다.

브라우저 환경은, request-header에 담겨있는 userAgent를 통해 확인할 수 있고,

이를 정규표현식을 통해 원하는 환경별로 구분해서 사용할 수 있습니다. 아래 예시코드를 통해 확인해 보겠습니다 !

 

const userAgent = typeof navigator === 'undefined' ? 'SSR' : navigator.userAgent;
const isAndroid = Boolean(userAgent.match(/Android/i));
const isIos = Boolean(userAgent.match(/iPhone|iPad|iPod/i));
const isOpera = Boolean(userAgent.match(/Opera Mini/i));
const isWindows = Boolean(userAgent.match(/IEMobile/i));
const isSSR = Boolean(userAgent.match(/SSR/i));
const isMobile = Boolean(isAndroid() || isIos() || isOpera() || isWindows());
const isDesktop = Boolean(!isMobile() && !isSSR());