From cdb46886f089fd155ef2363c931d573b9782c0e4 Mon Sep 17 00:00:00 2001 From: deun Date: Tue, 4 Mar 2025 21:40:47 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8B=EF=B8=8F=20NextJS=20=ED=81=AC?= =?UTF-8?q?=EB=A1=AC=20=EC=9D=B5=EC=8A=A4=ED=85=90=EC=85=98=20=ED=95=98?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=A0=88=EC=9D=B4=EC=85=98=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EB=85=B8=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../notes/nextjs-chrome-extension-error.mdx | 32 +++++++++++++++++++ src/styles/mdx.css | 3 ++ 2 files changed, 35 insertions(+) create mode 100644 src/content/post/notes/nextjs-chrome-extension-error.mdx diff --git a/src/content/post/notes/nextjs-chrome-extension-error.mdx b/src/content/post/notes/nextjs-chrome-extension-error.mdx new file mode 100644 index 0000000..7641a16 --- /dev/null +++ b/src/content/post/notes/nextjs-chrome-extension-error.mdx @@ -0,0 +1,32 @@ +--- +title: NextJS 크롬 익스텐션 하이드레이션 오류 +description: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used +date: 2025-03-04 +updatedDate: 2025-03-04 +tags: [nextjs, nextjs chrome extension] +category: nextjs +image: '' +--- + +![](/images/nextjs-chrome-extension-error/chrome-extension-error.avif) + +> Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used + +크롬 익스텐션 사용으로 위와 같은 하이드레이션 오류가 발생했다. +**크롬 익스텐션이 DOM을 변경**하여 Next.js가 서버에서 렌더링한 HTML과 클라이언트에서 렌더링 된 HTML이 일치하지 않아서 발생한 오류이다. + +```jsx highlight={3} +export default function RootLayout({ children }) { + return ( + + {/* ... */} + + ) +} +``` + +html 태그에 `suppressHydrationWarning`를 추가해 하이드레이션 불일치를 감지했을 때 **경고를 숨길 수 있다.** html 태그에만 속성을 추가했기 때문에 다른 컴포넌트에서 하이드레이션 문제가 발생한다면 경고가 표시된다. + +:::warning +이 방법은 단순히 **경고를 숨기는 것**이므로 크롬 익스텐션이 아닌 **다른 원인으로 해당 오류가 발생**한다면 **정확한 원인을 찾아 해결**해야 한다. +::: diff --git a/src/styles/mdx.css b/src/styles/mdx.css index c858fdc..cb96bb5 100644 --- a/src/styles/mdx.css +++ b/src/styles/mdx.css @@ -518,6 +518,9 @@ html.dark pre.astro-code span.highlighted span { .mdx .callout svg { width: 16px; height: 16px; + flex-shrink: 0; + align-self: baseline; + margin-top: 0.3em; } .mdx .callout[data-variant='title'] { display: block;