[Next.js] Warning: Prop `fill` did not match 경고 해결 방법

발생 원인

이 경고는 Next.js 앱에서 서버 측 렌더링과 클라이언트 측 렌더링 간에 일치하지 않는 prop이 발생한 경우에 나타날 수 있습니다.

 

 

해결 방법

const [mounted, setMounted] = useState(false);

// ssr에서 말고 클라이언트 측에서 렌더링 되고 난 후 코드 실행되도록 작성
useEffect(() => {
  setMounted(true);
}, []);

if (!mounted) return null;

...

이 코드를 사용하여 초기 서버 측 렌더링 시에는 렌더링을 하지 않고, 클라이언트에서만 렌더링을 수행하도록 보장할 수 있습니다. useEffect 훅을 사용하여 컴포넌트가 마운트된 후에 setMounted(true)를 호출하므로, 클라이언트에서만 실행되고 서버에서는 실행되지 않습니다.