Next.js | 기본기능 | userAgent 정보 확인하기

프로젝트를 진행하다보면 웹과 모바일 웹을 어떻게 구분지을지 고민하게 될 때가 있다.

 

접속하는 해상도에 따라 컴포넌트 자체가 달라져야 할 상황에는 결국 모바일 전용웹을 구축하고 모바일 이외의 해상도(태블릿, 중소형 모니터) 접속웹을 반응형으로 구축해야 할텐데, 해상도에 따라 페이지 자체가 바뀌거나(path) 달라지는 컴포넌트들의 개수가 많아지면 웹을 나눠서 구축하는 것이 좋겠지만, 페이지를 그대로 사용하고 달라지는 컴포넌트들의 개수가 별로 없을 경우에는 접속하는 userAgent에 따라 해당 컴포넌트만 달라지게끔 하는 것이 좋을 수도 있다고 생각했다. 구글링을 한 결과 2가지의 방법을 찾아냈다.

 

1. react-device-detect

첫번째는 react-device-detect라는 npm 모듈을 이용하는 방법이다. 먼저 모듈을 설치하자.

$ npm install react-device-detect --save

 

달라져야 할 컴포넌트에 다음과 같이 import 한다.

import {
  BrowserView,
  MobileView,
  isBrowser,
  isDesktop,
  isMobile
} from "react-device-detect";

 

import 한 변수의 값에 따라 다른 컴포넌트를 return 할 수 있다. ( 모바일일 경우 )

import {isMobile} from 'react-device-detect';

renderContent = () => {
    if (isMobile) {
        return <div> This content is unavailable on mobile</div>
    }
    return <div> ...content </div>
}

render() {
    return this.renderContent();
}

 

특정 브라우저가 아닐 경우 다음과 같이 지원하지 않는다는 메세지를 줄 수도 있다.

import {isIE} from 'react-device-detect';

render() {
    if (isIE) return <div> IE is not supported. Download Chrome/Opera/Firefox </div>
    return (
        <div>...content</div>
    )
}

 

특정 브라우저의 조건에 따라 특정 컴포넌트를 사용할 수도 있다.

import { browserName, CustomView } from 'react-device-detect';

render() {
    return (
        <CustomView condition={browserName === "Chrome"}>
            <div>...content</div>
        </CustomView>
    )
}

 

- 그 밖의 props들 ( 포스트 하단 링크 참조 )

 

2. SSR(Server-Side-Rendering)

두번째 방법은 NextJS에서 사용할 수 있는 SSR을 이용한 방법이다. 컴포넌트가 호출될 때 실행되는 _app.tsx

파일에 useEffect Hook으로 userAgent를 검색하고 페이지에서 SSR이 실행될 때 pageProps로 넘겨준다.

 

navigator에 관한 내용은 아래 링크를 참조하면 된다.

_app.tsx

 import App, { AppContext, AppInitialProps } from 'next/app'
import { AppProps } from "next/app";
import { NextPage } from "next";
//store
import wrapper from "../store";
//css
import "bootstrap/dist/css/bootstrap.min.css";
import { useEffect, useState } from "react";

function MyApp({ Component, pageProps } : AppProps) {
	return (
		<>
			<Component {...pageProps} />
		</>
	);
};
MyApp.getInitialProps = async (appContext : AppContext) => {
	// calls page's `getInitialProps` and fills `appProps.pageProps`
	const appProps = await App.getInitialProps(appContext);
  
	//userAgent
	const userAgent = await appContext.ctx.req ? appContext.ctx.req?.headers['user-agent'] : navigator.userAgent
  
	//Mobile
	const mobile = await userAgent?.indexOf('Mobi')
  
	//Mobile in pageProps
	appProps.pageProps.isMobile = await (mobile !== -1) ? true : false;
  
	return { ...appProps }
  }
  
  export default wrapper.withRedux(MyApp);

 

SSR에도 사용이 가능하다.

 

 

 

 

 

 

 

 

 

---

참조 - react-device-detect

https://bestofreactjs.com/repo/duskload-react-device-detect-react-utilites

Detect device, and render view according to detected device type. | BestofReactjs

 

참조 - SSR userAgent

https://www.howdy-mj.me/next/how-to-detect-device/

Next.js에서 userAgent 정보 가져오기

 

참조 - navigator

https://developer.mozilla.org/en-US/docs/Web/API/Navigator

Navigator - Web APIs | MDN