next.js 13 버전 app directory로 마이그레이션 하던 중 다음 경고 메시지를 발견했다.
Warning: Extra attributes from the server: style
body 태그에 빈 style 속성이 들어가서 경고가 뜬 것인데,
코드 동작에는 아무런 지장이 없다.
// app/layout.tsx
// Remove the server-side injected CSS.
if (document.body.getAttribute("style") === "") {
document.body.removeAttribute("style");
}
위 코드를 추가하면 warning이 사라지긴 한다.
next.js 13버전의 문제인지,
아직 베타 버전인 app directory의 문제인지
추후 업데이트에서 해결되어야 할 것 같다.
참고 : https://greensock.com/forums/topic/35440-warning-extra-attributes-from-the-server-style/
Warning: Extra attributes from the server: style
I'm working on a Nextjs 13 app and GSAP is working well but I have an annoying warning sign. GSAP is automatically adding an empty `style` tag on the body causing the bug. Is there a way to avoid this?
greensock.com
2023. 2. 6
브라우저에 존재하는 document를 서버에서 실행하려고 해서 그런지, 빌드에서 에러가 발생했다.
아래는 vercel 배포중 발생한 에러이다.
if ( document )를 이용한 방어 코드를 작성해도 에러가 없어지지 않았는데, 이해가 되지 않았다.
어쩔 수 없이 document 코드를 제거하고 Warning: Extra attributes from the server: style는 감수하기로 하였다.
'Web > Next.js' 카테고리의 다른 글
| Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - style-components (0) | 2023.02.06 |
|---|---|
| Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - Routing Hooks (0) | 2023.02.02 |
| Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - next/head (0) | 2023.02.01 |
| Next.js 13 pages 폴더에서 app router로 마이그레이션하기 (0) | 2023.01.29 |
