what is _app.js?

_app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

 

next.js 프로젝트를 생성하면, pages 폴더 내에 _app.js라는 파일이 위와 같이 생성되어 있는 것을 알 수 있다. 이 파일은 root component 역할을 한다. 즉 page 컴포넌트를 렌더링하기 위한 입구가 되기 때문에, 모든 페이지에 공통으로 적용해야 할 코드를 이 파일에서 작성할 수 있다. 

example code 

// 1. _app.js
import Layout from '../components/layout/layout'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

// 2. layout.js
import Header from './header'

export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  )
}