Next.js - Warning: Prop `...` did not match 이슈 해결

이슈 내용

Next.js에서 발생하는 이슈로, 서버와 클라이언트의 props 값이 다른 것이 원인이다.

 

나는 커스텀 훅을 사용하여 style props에 내려줄 값을 생성하다 보니 해당 경고를 마주하게 되었다.

Warning: Prop `style` did not match

 

 

해결 방법

해결 방법은 두 가지가 있으며, 상황에 맞게 골라서 사용하면 된다.

 

1. useState 사용

문제가 되는 props 변경이 클라이언트 단에서 렌더링될 수 있도록 isMounted state를 선언하여 마운트 이전에는 컴포넌트 렌더링을 하지 않는 방법이다.

const Page = () => {
  const [isMounted, setIsMounted] = useState(false);
 
  useEffect(() => {
    setIsMounted(true);
    document.body.style.margin = '0px';
  }, []);
 
  if (!isMounted) return null;
 
  return <SamplePage />;
};

 

 

2. dynamic import 사용

문제가 되는 props 변경이 일어나는 컴포넌트를 분리하고, 해당 컴포넌트를 코드 스플리팅하여 클라이언트 시점에 불러오는 방법이다.

 

next.js에서는 next/dynamic의 dynamic 함수를 사용하여 구현이 가능하다.

// case 1 - 컴포넌트의 export 구문에 적용
export default dynamic(() => Promise.resolve(SamplePage), { ssr: false });

// case 2 - 컴포넌트를 import하는 곳에서 적용
const SamplePage = dynamic(() => import('./SamplePage'), { ssr: false });