[NextJS] Warning: Extra attributes from the server: cz-shortcut-listen

발견한 에러

NextJS로 작업을 하는데 자꾸 콘솔에 이런 에러 메세지가 떴다. (사실 에러보단 경고 메세지?)

Warning: Extra attributes from the server: cz-shortcut-listen

 

해결

구글링이 최고시다 🥹

 

This is usually caused by an extension passing these extra attributes with your code when it is executed on the browser trying to interact with the UI, this creates a mismatch between what was rendered on the server and what is rendered on the client.

Extensions similar to Grammarly, ColorZilla and LanguageTool are therefore the cause of this warning, so you have to find out which one is doing this and then disable/configure it to not run on the ports you usually use for development. This is the straightforward fix for the warning, since it is always recommended to avoid extensions in development.

이는 일반적으로 확장 프로그램이 UI와 상호 작용하려고 브라우저에서 실행될 때 코드와 함께 이러한 추가 속성을 전달할 때 발생하며, 이로 인해 서버에서 렌더링된 내용과 클라이언트에서 렌더링된 내용 간에 불일치가 발생합니다.

따라서 Grammarly, ColorZilla 및 LanguageTool과 유사한 확장 프로그램이 이 경고의 원인이므로 어떤 확장 프로그램이 이 문제를 일으키는지 파악한 다음 일반적으로 개발에 사용하는 포트에서 실행되지 않도록 비활성화/구성해야 합니다. 개발 시에는 항상 확장 프로그램을 사용하지 않는 것이 좋으므로 이것이 경고에 대한 간단한 해결 방법입니다.

 

내가 사용하는 크롬 확장 프로그램 중 ColorZilla가 문제였다.

 

이런 식으로 cz라고 extra attrbute가 있는데 이게 문제였다.

SSR에서 서버와 클라이언트에서 서로 다른 것을 렌더링 할때 발생하는 경고라고 한다.

 

NextJS와 친해지는 중 🥲

 

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