custom app

전처럼 하나의 컴포넌트가 아닌 전역적인 css를 주고싶다면, Next.js가 모든 페이지를 렌더링할 수 있게 하는 _app.js라는 무조건 이 이름을 가진 파일을 만들어서 customize할 수 있다.

즉, _app.js는 청사진이 된다. 이걸 기반으로 pages에 있는 다른 js 파일들을 살펴본다.

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

이렇게 적으면, Component자리에 렌더링하길 원하는 페에지를 넣을 거고, 페이지를 렌더링하게 된다.

그래서 index.js about.js에 있는 <NavBar>을 _app.js에 적어놓으면 각각 컴포넌트에 사용할 일이 없게 된다.

그리고, 여기에 style을 적으면 모든 컴포넌트에 적용이 된다.

 

마지막으로, 다른곳에선 

import "../styles/globals.css";

이런 globals.css가 import 불가능인데, app.js에선 가능하며, 다른 곳에선 module을 사용해야만 한다.