[Next.js] Custom App

Styles JSX는 현재 컴포넌트만 scope로 가진다. 

그렇게 되면 전역으로 css 속성을 주고 싶은 경우 모든 컴포넌트에 하나하나 입력해야하는데, 그렇게 되면 

너무 귀찮아지고 실수가 발생할 수 있어 현실적으로 불가능하다. 

 

그럴때 사용할 수 있는 방법이 global 속성과 _app.js이다. 

 

global 

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

const Home = () => {
  return (
    <div>
      <NavBar />
      <h1>Home</h1>

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

export default Home;

jsx 옆에 global 옵션을 준다면 해당 컴포넌트와 자식 컴포넌트, 부모 컴포넌트에게도 영향을 주는 css 속성이 된다. 

하지만, 이것 역시 " 사용된 " 컴포넌트를 기준으로 속성이 적용된다. 

 

만약 

Home 컴포넌트와 About 컴포넌트가 있으며, 둘다 NavBar 라는 컴포넌트를 자식으로 가지고 있다고 생각해보자. 

Home 컴포넌트에서 global 옵션을 준다면 Home 컴포넌트와 NavBar 컴포넌트만 영향을 받고 

About 컴포넌트는 변화가 없이 그대로다. 반대의 경우인 About 컴포넌트에 주면 Home 컴포넌트는 변화가 없다.

 

이런 문제를 해결하기 위해서 _app.js를 사용한다. 

 

_app.js

Next.js의 모든 컴포넌트는 컴포넌트가 렌더링되기 전에 _app.js를 거쳐서 렌더링이 된다.  

 

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

가장 기본적인 _app.js의 형태이다. 

 

export default function App({ Component, pageProps }) {
  return (
    <div>
      <Component {...pageProps} />
      <span>Holla!</span>
    </div>
  );
}

여기에 추가로 태그를 넣는 등 작업을 한다면 모든 컴포넌트에서 동일하게 적용된다. 

Holla! 라는 span 태그가 모든 컴포넌트에 나오게 되는 것이다. 

 

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

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

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

이런 특성을 활용하면 각 컴포넌트에 있던 NavBar 태그와 공통으로 적용하고 싶었던 style을 한번에 적용할 수 있다. 

또한 _app.js에서만 css를 임포트할 수 있고, 다른 컴포넌트에서는 css 파일을 임포트할 수 없다. 

 

그러므로 css 파일을 적용하고 싶을 때도 _app.js에서 적용해줄 수 있다. 

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

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

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

만약 다른 컴포넌트에서 css 파일을 호출할 경우 

error - ./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\about.js

위와 같은 에러를 발생시키며, .app.js에 적용을 시켜달라는 안내 에러가 나온다.