Next.js 15 모바일인지 PC인지 구분하는 방법

 

목차

1. 구분하는 방법

2. 함수 작성

3. 사용 및 결과

 

---

개발/운영하는 홈페이지를 접속하였 때 모바일인지 PC인지에 따라서 보여주는 화면을 다르게 설정 할 때도 있다.

PC에서 접근하였는 경우 사이드 바를 보여주고, 모바일로 접속하였을 경우 사이드 바를 접고 햄버거 아이콘을 노출 시키고자 한다.

 

1. 구분하는 방법

JS의 navigator의 객체의 userAgent 함수를 사용을 할 것이다.

navigator.userAgent를 확인해보면 아래와 같이 응답 값을 얻을 수 있다.

'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36'

 

2. 함수 작성

공통으로 사용하기 위해서 Utils라를 공통 함수를 작성했다.

 

// src/utils/Utils.js
const getIsMobile = () => {
  const userAgent = navigator.userAgent;
  const isMobile = /mobile/i.test(userAgent);
  return isMobile;
};

export { getIsMobile };

 

3. 사용 및 결과

함수를 import 시키고, useEffect를 사용하여 처음 접근했을 때 open의 값을 저장한다

"use client";
import React, { useCallback, useEffect, useState, useRef } from "react";

import { getIsMobile } from "@/utils/Utils";

const PageLayout = ({ children }) => {
  //  sidebar menu
  const [open, setOpen] = useState(false);



  useEffect(() => {
    const isMobile = getIsMobile();
    setOpen((prev) => !isMobile);
  }, []);

  return (
    <Box sx={{ display: "flex" }}>
      
      <SideBar open={open} onClick={openClickHandler} />
      
    </Box>
  );
};

export default React.memo(PageLayout);

pc

모바일

 

 

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.