프론트엔드/Next.js
[Next.js] 루트 라우터 경로에서만 글로벌 스타일이 적용되는 버그? 해결(트러블 슈팅)
순코딩
2024. 12. 19. 07:31
루트 라우터 경로에서만 글로벌 스타일이 적용되는 버그를 해결했습니다.
이로 인해 기본 경로에서는 앱바에 스타일이 적용되지만 다른 경로로 이동하면 앱바의 색상이 변경되었습니다.
결론부터 말씀드리자면 이유는 어이없게도 본인 과실이었습니다.(역시 컴퓨터는 잘못이 없습니다.)
원인
scr / app / page.tsx
import GlobalStyles from "@/styles/GlobalStyles";
import Home from "@/pages/Home";
export default function page() {
return (
<>
{/* 루트 라우터 경로에만 글로벌 스타일이 적용되어 있었습니다. */}
<GlobalStyles />
<Home />
</>
);
}
해결 방법
모든 경로에 글로벌 스타일을 적용하기 위해 레이아웃에 글로벌 스타일 태그를 삽입합니다.
app / src / layout.tsx
import type { Metadata } from "next";
import GlobalStyles from "@/styles/GlobalStyles";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body>
<GlobalStyles />
{children}
</body>
</html>
);
}