2.페이지 & 레이아웃 

Next.js에서 UI를 구성할 때는 크게 두 가지 형태의 파일을 사용함

• page.js, 페이지에 나타낼 UI를 작성하는 파일
• layout.js, 페이지에 나타낼 레이아웃을 작성하는 파일

1. page.js 

page.js는 특정 라우트(경로)에 해당하는 페이지에 나타낼 UI를 작성할 때 사용됨

localhost:3000/ 와 같이 루트 경로로 접근 시 표시될 페이지를 구현하기 위해서는 최상위 폴더 경로인 app/ 폴더 바로 아래에 page.js를 작성하면 됨

// `app/page.js` 는 localhost:3000'/' 경로에 나타낼 UI를 작성할 때 사용함
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

따라서 localhost:3000/dashboard 경로로 접근 시 표시될 페이지를 구현하기 위해서는 app/dashboard/page.js와 같이 작성할 수 있음

2. layout.js 

레이아웃은 특정 폴더를 기준으로 하위에 중첩된 폴더들까지 공통으로 적용시킬 UI가 필요할 때 사용됨

dashboard 경로와 하위 경로인 settings에 공통으로 적용시킬 UI 레이아웃이 필요할 경우, 최상위 경로인 dashboard/layout.js에 작성하면됨

그렇게 되면 layout.js에 작성한 레이아웃이 settings/page.js까지 공통으로 적용됨

// layout.js에는 children props를 사용하며, page.js 혹은 중첩된 레이아웃이 전달됨
export default function DashboardLayout({ children }) {
  return (
    <section>
      {/* header, footer와 같이 공유될 UI를 작성하는 부분 */}
      <nav></nav>
      
      {children}
    </section>
  )
}