Next.js 튜토리얼 - ch4. 레이아웃과 페이지 생성하기

Learn Next.js 튜토리얼
https://nextjs.org/learn/dashboard-app/getting-started

Next.js 튜토리얼 - ch4. 레이아웃과 페이지 생성하기

Next.js App Router

Next.js 13버전부터 앱 라우터를 제공한다. 이전에는 /pages 디렉토리 하위에 경로 설정을 통해 라우팅을 했었지만,
13버전부터는 /app 디렉토리 하위에 경로 설정을 통한 파일 시스템 기반 라우팅을 하게 된다. URL의 경로와 파일 경로가 일치하게 되는 것이다.

다음은 예시이다.
애플리케이션 실행 시 localhost:3000 번으로 호스팅 된다고 가정하자.

• localhost:3000/dashboard 경로에서 보여지는 페이지
  • = /app/dashboard/page.jsx
• localhost:3000/dasahboard/customers 경로에서 보여지는 페이지
  • = `/app/dashboard/customers/page.jsx'

이와같이 URL path와 file path가 일치함.

예약어 파일

디렉토리 하위에 다음과 같은 예약어 파일들을 위치시켜 디렉토리와 매핑되는 URL의 페이지를 구성할 수 있다.
(js 사용하는 경우 .jsx, ts 사용하는 경우 .jsx 확장자 가짐.)

• page.jsx
  • 특정 경로에서 보여주고자 하는 페이지
• layout.jsx
  • 특정 경로 하위에서 공통으로 적용하고자 하는 레이아웃
• error.jsx
  • 500 서버 에러 발생 시 보여주고자 하는 커스텀 에러 페이지
• not-found.jsx
  • 404 not found 에러 발생 시 보여주고자 하는 커스텀 에러 페이지 (13버전부터 에러 코드 숫자가 아닌 에러명으로 파일명을 설정해야 함)
• loading.jsx
  • 로딩 시 보여주고자 하는 커스텀 로딩 페이지

레이아웃 설정의 장점

레이아웃은 불변(공통) 영역으로, 하위 주소들에 모두 적용되기 때문에 페이지가 바뀌어도 레이아웃은 리렌더링 되지 않는다.

import SideNav from '@/app/ui/dashboard/sidenav'

export const experimental_ppr = true

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className='flex h-screen flex-col md:flex-row md:overflow-hidden'>
      <div className='w-full flex-none md:w-64'>
        <SideNav />
      </div>
      <div className='flex-grow p-6 md:overflow-y-auto md:p-12'>{children}</div>
    </div>
  )
}

레이아웃 설정 시 props로 children을 받고, 레이아웃 사이에 children을 넣으면 된다.