루트 라우터 경로에서만 글로벌 스타일이 적용되는 버그를 해결했습니다.
이로 인해 기본 경로에서는 앱바에 스타일이 적용되지만 다른 경로로 이동하면 앱바의 색상이 변경되었습니다.
결론부터 말씀드리자면 이유는 어이없게도 본인 과실이었습니다.(역시 컴퓨터는 잘못이 없습니다.)
원인
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>
);
}
'프론트엔드 > Next.js' 카테고리의 다른 글
| [Next.js] Next.js + styled-components + MUI 프로젝트 세팅(그리고 styled-components 글로벌 스타일링과 MUI 커스텀 테마 적용하기) (0) | 2024.12.19 |
|---|---|
| [Next.js] Next.js 폴더(디렉토리) 구조 템플릿 (0) | 2024.12.19 |
| [Next.js] error.tsx와 useErrorHandler를 활용한 전역 에러 처리 (0) | 2024.12.17 |
| [Next.js] Next.js에서 styled-components 글로벌 스타일 적용 방법 (1) | 2024.12.17 |
| [Next.js] Next.js 환경에서 MUI integration 방법 + MUI 전역 스타일링 방법 (0) | 2024.12.03 |
