메타데이터(metadata) 객체
- 정의: 메타데이터 객체는 페이지나 레이아웃 컴포넌트에서 내보내는(export) 객체로, 해당 페이지의
<head> 영역에 삽입될 메타 정보를 포함한다.
- 사용 방법:
title과 description 등의 속성을 정의하여 페이지 제목과 설명을 설정할 수 있다.
- 메타데이터는 레이아웃과 페이지에서 모두 정의될 수 있으며, 병합된다. 즉, 페이지 메타데이터는 레이아웃 메타데이터를 덮어쓰지 않고 함께 사용된다.
- 템플릿 사용:
title 속성에 템플릿을 사용하여 일관된 제목 형식을 적용할 수 있다.
- 예를 들어, 레이아웃에서
title을 { default: 'Next Movies', template: '%s | Next Movies' }로 설정하고, 각 페이지에서 개별적인 title을 설정하면 자동으로 템플릿에 맞게 제목이 생성된다.
- 주의사항:
- 메타데이터는 서버 컴포넌트에서만 사용할 수 있으며, 클라이언트 컴포넌트에서는 사용할 수 없다.
- 페이지와 레이아웃 컴포넌트에서만 메타데이터를 내보낼 수 있다.
라우트 그룹(route groups)
- 정의: 라우트 그룹은 괄호
()로 폴더 이름을 감싸서 라우트를 그룹화하는 기능이다.
- 사용 방법:
- 예를 들어,
app/(home)/page.tsx처럼 폴더를 괄호로 감싸면 해당 폴더는 URL 경로에 영향을 주지 않는다.
- 이는 파일 구조를 정리하고 논리적으로 라우트를 그룹화하는 데 유용하다.
- 장점:
- 복잡한 애플리케이션에서 라우트를 더 쉽게 관리할 수 있다.
- 특정 라우트 그룹에 별도의 레이아웃이나 메타데이터를 적용할 수 있다.
- 예시:
(movies)라는 라우트 그룹을 만들어 영화와 관련된 페이지들을 그룹화할 수 있다.
- 이렇게 하면 URL 구조는 그대로 유지되면서 파일 구조를 깔끔하게 관리할 수 있다.
추가 정보 및 주의사항
- 메타데이터 병합: 레이아웃과 페이지에서 정의한 메타데이터는 병합되므로, 상위 레이아웃의 메타데이터에 페이지의 메타데이터가 추가된다.
- 동적 메타데이터: 메타데이터를 동적으로 생성해야 하는 경우에도 지원되는 기능이 있으며, 이는 다음 강의에서 다룰 예정이다.
- 레이아웃과 메타데이터의 중첩:
- 레이아웃은 중첩될 수 있으며, 각 레이아웃의 메타데이터도 함께 병합된다.
- 이는 복잡한 페이지 구조에서 일관된 메타 정보를 유지하는 데 도움이 된다.