Next.js 14 Tutorial by Codevolution
1. 레이아웃
- 폴더 내 layout.tsx 파일이 최상위로 렌더링되어 주로 큰 UI 덩어리 단위로 나누는 용도 (헤더, 메인, 푸터)
- app 폴더 내부 layout.tsx 파일은 최상위 레이아웃이라 모든 파일에서 렌더링 됨
중첩 레이아웃
- 각 폴더의 layout.tsx 파일은 해당하는 라우팅에서 렌더링 됨
- 레이아웃 라우팅 순서: app 최상위 layout.tsx > 각 폴더 layout.tsx
Route group 레이아웃
- 폴더명을 () 로 감싼 routes group에서도 동일하게 동작함
2. 메타 데이터
metadata
- page.tsx, layout.tsx 파일에서 expoort하여 정의
- 중복시 최상위 > 각 폴더 순서로 메타데이터 각 항목 덮어쓰기 됨
generateMetadata
- params 인자로 path variable 전달받아 비동기 작업 이후 metadata object 리턴하는 용도
title 프로퍼티 메타데이터
- string | Metadata 타입
- string 타입: 해당 페이지 타이틀 지정 값
- Metadata 타입:
{
absoulte: 템플릿 값 무시하고 해당 값으로만 타이틀 값 지정하는 프로퍼티
deafult: 기본 지정 값
template: 각 페이지 타이틀 지정 값 뒤에 붙는 값
}
3. 네비게이션
- <Link /> 컴포넌트 사용
- usePathname 훅으로 path variable 추출 가능
- useRouter 훅으로 페이지 이동 가능
4. 템플릿
- layout.tsx 처럼 하위 컴포넌트 랩핑 동일
- 차이점은 페이지 이동시 상태를 유지하지 않음, 새로운 인스턴스 생성함
- 레이아웃 순서: layout.tsx > template.tsx > page.tsx
