Next.js

는 리액트 기반의 프레임워크로 SSR을 지원하고 폴더 및 파일 기반의 라우팅을 지원한다.

설치방법

npx create-next-app@latest 

create-next-app으로 설치하면

1. 컴파일과 번들링이 자동
2. 자동 리프레쉬 기능으로 수정하면 바로 화면에 반영
3. 서버사이드 렌더링 지원
4. 정적 파일 지원

_app.js

pages/_app.js

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

// Component는 현재 페이지를 의미한다. 페이지 전환시 Component props가 변경됨

• 최초로 실행되는 파일
• 페이지 전환시 레이아웃을 유지할 수 있다.
• 페이지 전환시 상태값을 유지할 수 있다.
• componentDidCatch를 이용해서 커스텀 에러 핸들링을 할 수 있다.
• 추가적인 데이터를 페이지에 주입이 가능하다
• 글로벌 CSS 선언 장소

layout.js

components/layout.js

import Navbar from './navbar'
import Footer from './footer'
 
export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

//  children은 layout 컴포넌트가 감싸고 있는 다른 컴포넌트

_app.js와 layout.js의 차이가 헷갈렸는데 _app.js은 좀 더 전역적인 내용을 정의한다고 생각하면 될 것 같다. layout은 말 그대로 틀을 만드는 용도로 사용하고.
getLayout 이라는 속성을 쓰면 각 페이지마다 layout을 만드는게 가능하다고 하다.

 
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
 
export default function Page() {
  return (
    /** Your content */
  )
}
 
Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

출처 :
nextjs 공식 페이지
코딩애플
https://moon-ga.github.io/next.js/4-_appjs-and-layout
노마드 코더 NextJS 시작하기