Layout.tsx
next.js는 상위폴더로 이동하여 레이아웃이 있는지 확인하고
레이아웃이있는 경우에 그 레이아웃을 사용하여 하위 항목을 렌더링한다.
레이아웃은 중첩된다.
레이아웃이 생성될 때는
루트 레이아웃을 가져옴 -> url를 확인 -> 해당 폴더 안에 layout파일이 있는지 확인 -> 레이아웃이 있다면 그 레이아웃을 밖에 있는 다른 레이아웃 안에 렌더링 -> ... 이런 과정으로 반복된다.
route groups
route groups로 생성된 폴더는 URL을 생성하지 않는다.
소괄호() 안에 이름을 적고 폴더를 생성하면 된다.
dynamic routes
대괄호[]를 사용하면 dynamic routes를 구현할 수 있다.
URL의 id 값을 받아오기 위한 코드를 짜고
export default function BoardDetail({
params: { id },
}: {
params: { id: string };
}) {
return (
<div>
<h1>Board Detail</h1>
<p>Board ID: {id}</p>
</div>
);
}실행해 보면 다음과 같은 결과가 출력된다.
metadata
- 페이지의 head 부분에 표시되는 정보이다.
- page나 layout 파일에서만 메타데이터를 내보낼 수 있다.
- metadata는 client 컴포넌트에 있을 수 없다. server 컴포넌트에만 있어야한다.
예를들어, '/' 경로의 page.tsx 파일에 다음과 같은 코드를 추가하면
또한 metadata는 layout과 다르게 병합된다.
예를 들어, 다음과 같이 metadata의 템플릿을 만들고
다음과 같이 다른 파일에서 metadata를 내보내면
