새로 고침 하면 아래와 같은 오류가 발생했다.

Hydration failed because the initial UI does not match what was rendered on the server

Next.js 공식 문서에 따르면 오류가 발생한 이유로는

“ 텍스트 내용이 서버에서 렌더링 된 HTML과 일치하지 않습니다. “

렌더 시점에 대한 이유로 발생한 거 같다.

여러 해결 방법 중 useEffect를 활용해서 해결했다.

import { useState, useEffect } from 'react'
 
export default function App() {
  const [mounted, setMounted] = useState(false)
 
  useEffect(() => {
    setMounted(true)
  }, [])
 
  return <>{mounted && <p>'This is never prerendered'</p>}</>
}

참고