[커뮤니티 페이지 생성하기 강의부분] authRoute 논리연산자를 추가하면 error가 뜹니다.

_app.tsx

export default function App({ Component, pageProps }: AppProps) {
  axios.defaults.baseURL = process.env.NEXT_PUBLIC_SERVER_BASE_URL + '/api';
  axios.defaults.withCredentials = true;

  const { pathname } = useRouter();
  const authRoutes = ['/register', '/login'];
  const authRoute = authRoutes.includes(pathname);

  return (
    <AuthProvider>
      {!authRoute && <NavBar />}
      <div className={authRoute ? '' : 'pt-12'}>
        <Component {...pageProps} />
      </div>
    </AuthProvider>
  );
}

해당 부분에서 !authRoute 논리연산자를 추가하면

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

에러가 나옵니다.

강사님 파일을 클론 해서 빌드 확인해보니 이런 에러가 안나오길래, 이 강의까지의 나머지 파일도 클론한 것과 모두 같은 것을 확인했는데 왜 저만 이런 에러가 나오는걸까요?

해당 에러를 구글링해서 해결책으로 나오는 것들을 적용해봤는데 어느것도 에러를 해결해주지 못했습니다ㅠ

어떤 부분을 확인해보면 좋을까요?

const {loading, authenticated} = useAuthState();

const {authenticated, loading} = useAuthState();