Next.js 12 - Global Style

Next.js 12

⚫ Global Style을 추가하는 법

---

import NavBar from "../components/NavBar";

export default function Home() {
  return (
    <div>
      <NavBar />
      <h1>Hello</h1>
      <style jsx global>{`
        a {
          color: white;
        }
      `}</style>
    </div>
  );
}

- styled - jsx에 global이라는 prop을 추가하면 된다.

- 하지만 <NavBar>가 Home과 About 페이지 별로 style이 다르게 나타난다.

  (Home에서 style에 global 속성을 주었어도, NavBar는 적용되나, About 페이지의 NavBar는 별도로 설정해줘야 한다.)

 

⚫ 모든 페이지들에 전역적으로 스타일링을 하고 싶다면?

---

- global 속성이 들어간 style을 복붙하는 방법은 너무 구리다.

  (<NavBar>를 복붙하는 것도 개선해야 한다)

 

- App component를 만들어야 한다.(일종의 어떤 컴포넌트의 blueprint)

  기본으로 프레임워크 내에 포함되어 있다.

  _app.js라는 파일을 pages 내에 생성해야 한다. (무조건 이 이름으로)

(Next.js는 _app.js를 가장 먼저 확인한다.)

 

⚫ _app.js 설정법

---

- Next.js가 기본적으로 페이지들을 render할 때 사용되는데, 이 파일을 custom함으로써 template으로 사용할 수 있다.

 

- 아무 이름으로 함수를 만든다. Next.js가 _app.js를 자동으로 호출하면서 이 함수를 호출할텐데, 2개의 prop과 함께 호출한다.

  (Component, pageProps)

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

export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <span>hello</span>
      <style jsx global>{`
        a {
          color: white;
        }
      `}</style>
    </>
  );
}

- Next.js로 앱을 만들 때는 global CSS 파일을 import 할 수 없다.

  커스텀 <App> 이외의 파일들로부터는 import 할 수 없다는 error가 뜬다.

  페이지나 컴포넌트 내에 CSS를 import하고 싶다면, 반드시 그 CSS는 module.css이어야 한다.

 

(module.css 파일 형태를 제외한 모든 나머지 CSS파일들은 _app.js에서만 import해와서 사용해야 한다. 글로벌 CSS간의 충돌을 피하기 위해서이다.)