[NextJS] Custom App 전역적인 스타일링

style jsx global

<style jsx global>{`
	a {
		color: white;
	}
`}</style>

jsx에 global을 추가하면 전역적으로 a태그가 적용된다.

/about 페이지로 이동하면 위의 a태그의 css는 적용되지않는다. 페이지가 바뀌면 렌더링 되는 컴포넌트가 달라지기 때문에 이 global은 적용되지않는다??

리액트에서는 고려할 필요가없지만 넥스트에서는 고려해야한다.
Next는 페이지별로 동작한다.

이를 해결하기위한 방법이 있다.

App Component

우리는 각 페이지마다 <NavBar />를 반복해서 사용하고있다.
이 반복을 줄이기위해서 그리고 모든 페이지에 전역적으로 스타일링하기위해서 App Component를 사용한다.
App 컴포넌트는 모든 페이지를 그리기위한 청사진이다.

• pages/app.js

import NavBar from "../components/NavBar";
import "../styles/globals.css";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  );
}

이름은 무조건 _app.js이어야한다. 이것은 프레임워크에 포함된 것으로 먼저 _app.js를 본뒤에 그걸 기반으로 index.js를 보고 화면을 렌더링한다.

컴포넌트를 가져다가 Myapp의 Component Prop으로서 전달된다.

_app.js에 style jsx global로 css를 작성하면 모든 페이지에 전역으로 적용된다.

• pages/about.js

export default function Potato() {
  return (
    <div>
      <h1>About</h1>
    </div>
  );

• pages/index.js

export default function Home() {
  return (
    <div>
      <h1 className="active">Hello</h1>
    </div>
  );
}

이제 NavBar를 페이지마다 복붙할 필요가 없다.

import CSS

import "../styles/globals.css"

페이지나 컴포넌트 내에 CSS를 import하고 싶다면 반드시 module이어야한다. 그렇지않으면 아래와 같은 에러가 발생한다.

하지만 커스텀 App이 있는 파일에는 모든 Global Styles를 import할 수 있다.