[Next.js] globalsStyle, customApp

next.js에서 globalsStyle을 적용하려면 appComponent를 custom해줘야 한다.

기본적으로 숨어져있는 app을 수정하려면

 

1. pages에 _app.js를 만들어야한다.

2. _app.js에서 App component를 생성하고, Component와 pageProps를 parameter로 받은 후 불러와준다.

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

 

3. 그 후 styles폴더안의 globals.css 를 불러온다. (module이 아닌 css는 커스텀app에서만 불러올 수 있음)

import "../styles/globals.css";
export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

 

4. 여러 페이지에 공통으로 사용되는 navBar나 footer를 임포트해준다.

import NavBar from "../components/NavBar";
import "../styles/globals.css";
export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  );
}

 

5. style jsx global 을 통해 추가로 글로벌스타일을 주거나, globals.css를 수정하여 글로벌 스타일을 줄 수 있다.

import NavBar from "../components/NavBar";
import "../styles/globals.css";
export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <style jsx global>
        {`
          * {
            font-size: 18px;
          }
        `}
      </style>
    </>
  );
}