custom app(_app.js)
import NavBar from "../components/NavBar";
import '../styles/globals.css'
export default function App({Component, pageProps}) {
return (
<div>
{}
{}
<NavBar />
<Component {...pageProps} />
{}
<span>go</span>
{}
<style jsx global>
{`
a {
color: white;
}
`}
</style>
</div>
)
}
- 페이지가 렌더링 되기 전에 custom app을 먼저 확인 후 렌더링
- App({Component, pageProps}) <Component {...pageProps} />는 정해진 양식
- Component는 모든 컴포넌트를 지칭. 따라서 _app.js파일에 내용을 적용(위 코드에서 'NavBar'는 위에 'go'는 모든 페이지 컴포넌트 밑에 출력)
- 다른 페이지에서는 module.css 외에는 css import 불가하지만 _app.js에서는 import globals.css 가능
- style jsx global 형식으로 해당되는 모든 컴포넌트에 global style 적용