전역 스타일(Global Styles)
CSS Modules는 컴포넌트 수준의 스타일에 유용합니다. 그러나 모든 페이지에서 로드되어야 하는 CSS가 필요한 경우에도 Next.js에서 지원합니다.
전역 CSS를 애플리케이션에 로드하려면 다음 내용으로 pages/_app.js라는 파일을 생성하세요.
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}_app.js 파일의 기본 내보내기는 애플리케이션의 모든 페이지를 래핑하는 최상위 React 컴포넌트입니다. 이 컴포넌트를 사용하여 페이지 간 탐색 시 상태를 유지하거나 여기에서처럼 전역 스타일을 추가할 수 있습니다. _app.js 파일에 대해 자세히 알아보세요.
개발 서버를 재시작하세요(Restart the Development Server)
중요한 점: pages/_app.js를 추가한 후에는 개발 서버를 재시작해야 합니다. 서버를 중지하려면 Ctrl + c를 누르고 다음 명령을 실행하세요.
npm run dev전역 CSS 더하기(Adding Global CSS)
Next.js에서는 pages/_app.js에서 해당 CSS 파일을 가져와서 전역 CSS 파일을 추가할 수 있습니다. 전역 CSS는 다른 곳에서는 가져올 수 없습니다.
전역 CSS를 pages/_app.js 이외의 곳에서 가져올 수 없는 이유는 전역 CSS가 페이지의 모든 요소에 영향을 주기 때문입니다.
만약 홈페이지에서 /posts/first-post 페이지로 이동한다면, 홈페이지의 전역 스타일이 의도치 않게 /posts/first-post에 영향을 미칠 것입니다.
전역 CSS 파일은 어디에나 배치할 수 있으며 임의의 이름을 사용할 수 있습니다. 따라서 다음을 수행해 보겠습니다:
- 상위 수준에
styles디렉토리와global.css파일을 생성합니다. styles/global.css내에 다음 CSS를 추가합니다. 이 코드는 일부 스타일을 초기화하고as 태그의 색상을 변경합니다.
마지막으로, 이전에 생성한 pages/_app.js 파일 내에서 CSS 파일을 가져오세요.
// `pages/_app.js`
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}이제 http://localhost:3000/posts/first-post에 접속하면 스타일이 적용된 것을 확인할 수 있습니다. _app.js에서 가져온 모든 스타일은 애플리케이션의 모든 페이지에 전역적으로 적용됩니다.
작동하지 않는다면:
pages/_app.js를 업데이트한 후에는 개발 서버를 재시작했는지 확인해주세요.
출처: https://nextjs.org/learn/basics/assets-metadata-css/global-styles
