NextJS 시작 #7 | Custom App (Global Style)

Global Style 을 위해 알아야한 매우 중요한 Next.js 컨셉

• App Component
• App Page

App Component, App Page

1. /pages 폴더에 _app.js 파일을 생성합니다.
   • Next.js 는 각 페이지를 렌더링하기 전에 _app.js 를 먼저 확인하고 각 페이지를 렌더링합니다.
   • _app.js 에 넣어둔 청사진을 기반해서 각 페이지를 렌더링
2. _app.js 의 App Component 의 기본 형태는 아래와 같습니다.
   • 각 페이지를 있는 그대로 렌더링 해줍니다.

// /pages/_app.js

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

3. 2의 기본 형태에서 원하는 것들을 추가하여 Global Style을 커스텀 할 수 있습니다.

• Pug 의 base extend 처럼 근간이 되는 페이지로 사용하여 반복 코드 줄이는 것 가능
• 스타일 커스텀 가능

// /pages/_app.js

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

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

4. _app.js 에는 CNA 시 생성되었던 /styles/globals.css 를 import 하여 사용할 수 있습니다.
   • _app.js 를 제외한 컴포넌트 파일에는 global css import 불가능

// /pages/_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: green;
        }
      `}</style>
    </>
  );
}

참조

노마드코더 NextJS 시작하기