Next.js에서 미디어쿼리 (반응형) 적용하기

서버사이드 렌더링으로 인해 Next.js에서 반응형을 구현하는데는 불편함이 따른다

그래서 dynamic import나 getInitialProps를 사용해서 해결하지만 이건 SEO를 포기한다는 단점이 있어

Next.js를 사용하는 이유 자체가 퇴색되는 느낌이 들어 새로운 방식을 찾아봤다

const [isMobile, setIsMobile] = useState(false);
const mobile = useMediaQuery({ query: "(max-width: 767px" });

useEffect(() => {
    if (mobile) {
        setIsMobile(mobile);
    }
}, [mobile]);

이 방법은 react-responsive 라이브러리를 사용해서 구현한 방식으로
렌더링될때 mobile값이 변하는 것을 감지해 상태 업데이트를 시켜 모바일에 맞게 컴포넌트를 재렌더링 시키는 방식이다

resize가 안된다는 단점이 있지만 seo를 챙기기위해서 우선 이 방법을 사용하고 있다.