[오늘의 공부]/Next.js
[오늘의 Next.js] Warning: Extra attributes from the server: cz-shortcut-listen
개피곤씨
2024. 6. 21. 19:10
이런 에러가 뜬다면... ?
layout의 body 태그 안에
suppressHydrationWarning={true}속성을 추가하자
위 속성은 Hydration 경고를 줄이는 것이라고 합니다.
(= 작은일에 경고 때리지 마소)
//(Root)layout
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body suppressHydrationWarning={true}>
{children}
</body>
</html>
);
}브라우저 확장 프로그램(예: Grammarly, ColorZilla, LanguageTool 등)이
서버에서 렌더링된 HTML에 추가 속성을 동적으로 주입할 때 발생할 수 있다고 합니다...?
이로 인해 서버에서 렌더링된 UI와 클라이언트에서 렌더링된 UI 간의 불일치가 발생하게 되어서 그렇다고 함
출처 : https://stackoverflow.com/questions/75337953/what-causes-nextjs-warning-extra-attributes-from-the-server-data-new-gr-c-s-c