Pages
page.js 파일에서 컴포넌트를 구성해 페이지를 정의하고 해당 경로에 맞게 접근할 수 있습니다.
- 페이지는 기본적으로 Server Components이지만 Client Components로 설정할 수 있습니다.
- 페이지에서 데이터를 가져올 수 있습니다 데이터 가져오기
- ※ 헤더 설정 가능
- js 뿐 아니라 js, ts, tsx 형식 사용 가능
Layouts
layout.js 파일을 정의해 여러 페이지에서 공유되는 UI 를 구성할수 있습니다. 레이아웃은 상태를 유지하며 다시 렌더링되지 않습니다. 레이아웃은 중첩될 수도 있습니다.
children props 를 통해 하위 레이아웃(존재하는 경우) 또는 하위 페이지로 채워집니다.
layout.js및page.js파일을 동일한 폴더에 정의할 수 있습니다. 레이아웃이 페이지를 감싸게 됩니다.- app 디렉토리에 최상위 레이아웃을 루트 레이아웃이라고 하며
<html>및<body>태그를 정의해 사용해야 합니다. 이 레이아웃은 필수이며 애플리케이션의 모든 페이지에서 공유됩니다. - 모든 경로 세그먼트는 선택적으로 자체 레이아웃을 정의할 수 있습니다.
- ※ 헤더 설정 가능 (
<title>및<meta>와 같은<head>태그를 루트 레이아웃에 수동으로 추가하면 안 됩니다.) - js 뿐 아니라 js, ts, tsx 형식 사용 가능
Templates
템플릿은 각 하위 레이아웃이나 페이지를 래핑한다는 점에서 레이아웃과 유사합니다. 경로 전반에 걸쳐 지속되고 상태를 유지하는 레이아웃과 달리 템플릿은 탐색 시 각 하위 항목에 대해 새 인스턴스를 만듭니다.
- 특정 양식이 가변적인 조건에 따라 필요로 할 때 사용
- 중첩 측면에서
template.js는 레이아웃과 해당 하위 항목 사이에 렌더링됩니다.
<Layout> {/* Note that the template is given a unique key. */}
<Template key={routeParam}>{children}</Template>
</Layout>참고
'nextjs > next 14 공식 문서 부시기' 카테고리의 다른 글
| [next 14 공식문서 부시기] 2.4. Error 처리와 Error boundary (0) | 2024.01.16 |
|---|---|
| [next 14 공식문서 부시기] 2.3. <Link> & navigating (0) | 2024.01.15 |
| [next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming (0) | 2024.01.15 |
| [next 14 공식문서 부시기] 2. Next.js 라우팅 맛보기 (0) | 2024.01.12 |
| [next 14 공식문서 부시기] 1. 설치 및 시작 (0) | 2024.01.11 |
