Next.js) className did not match

프론트엔드 개발/Next.js

Next.js) className did not match

Ella Seon 2023. 9. 6. 14:53

0. 에러메세지

next. js를 그냥 설치만 했을 뿐인데 계속 콘솔창에 에러메세지가 났다.

Warning: Prop `className` did not match. Server: "__className_20951f vsc-initialized" Client: "__className_20951f" at body at html at RedirectErrorBoundary

1. 에러 해결과정

- 처음에는 아래 게시글에서 RootLayout 에 <body suppressHydrationWarning={true}> 이 태그를 추가하라고 했었다.

https://stackoverflow.com/questions/75337953/what-causes-nextjs-warning-extra-attributes-from-the-server-data-new-gr-c-s-c

What causes NextJS Warning: "Extra attributes from the server: data-new-gr-c-s-check-loaded... "

I am getting the following warning from my NextJS Application: Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed,cz-shortcut-listen,data-lt-installed I...

stackoverflow.com

export default RootLayout({ children }) {
  return (
   <html lang="en">
      <body suppressHydrationWarning={true}>
        {children}
      </body>
    </html>
  )
}

하지만, 이건 근본적인 해결책이 아니고 단순히 경고메세지를 숨기는 속성이었다.

- 서버와 클라이언트 간에 className 속성의 값이 다르게 렌더링 되었다는 건데...

나는 그냥 설치만했는데 뭐가 다르다는거지?

localhost:3000 에서 body 태그를 살펴보면 body 태그에 vsc-initialized가 추가되어있는 걸 확인 할 수 있다.

vsc-initialized 정체가 무엇인고...

검색해보니 Video Speed Controller 확장프로그램을 설치하면 body 태그에 추가된다는 것이었다.

확장프로그램을 삭제해보니 body 태그에 아무것도 없어졌다.!

className did not match 로만 검색했을 때는 자꾸 styled-components를 사용해서 그렇다는 게시물 밖에 안나왔었는데...

문제는 확장프로그램이었다. 확장프로그램을 잘 정리하자!!

그리고 애초에 Next.js 초기에 셋팅할 때 body 태그에 className 을 지워버리면 된다. {Inter} 이부분이 필요없기 때문이다.

현재글Next.js) className did not match

Ella 프론트엔드일지