Pages
- page.js 파일을 생성하는 것으로 해당 라우트 경로에 공개적으로 접근을 할 수 있게 해줌
- 루트 디렉토리에 접근을 위해서는 app 폴더 바로 아래에 page.js 작성
Layouts
- 여러 페이지에서 UI를 공유할경우 layout을 사용
- 레이아웃은 상태를 보존하면서 라우팅 시에도 보존됨
- 레이아웃을 중첩되게 구성할수도 있음
ex) layout.tsx
export default function DashboardLayout({
children, // 페이지 또는 중첩되는 레이아웃
}: {
children: React.ReactNode,
}) {
return (
<section>
<nav></nav>
{children}
</section>
);
}Root layout
- app 디렉토리에는 반드시 root layout이 정의되어야 하며, 이를 통해 서버에서 처음 반환된 HTML을 변형하게 됨
- root layout에는 html, body 태그가 반드시 정의되야 함
- head tag를 작성해 사이트를 검색 엔진에 최적화 해줄 수 있음
- 다른 layout은 필요에 따라 Client component로 설정이 가능하지만 root layout은 무조건 Server component가 됨
Nesting Layouts
- 폴더 내부에 layout 파일이 정의되어 있으면 해당 세그먼트가 활성화될 때 layout도 활성화됨
- 만약 상위 폴더에도 layout이 정의되어 있다면 layout은 해당 레이아웃의 children으로 들어가게 됨
Templates
- layout과 유사하지만 인스턴스가 새로 생성될 때 마다 상태가 초기화되며 DOM이 새로 생성되는 방식으로, template.js 파일을 통해 구현 가능
- 애니메이션이 존재하거나, state에 영향을 받거나 프레임워크 행동에 영향을 받는 경우 template 사용을 고려해볼 수 있음
- 꼭 필요한 경우가 아니면 layout 사용을 권장
ex )
export default function Template({ children }: {
children: React.ReactNode
}) {
return <div>{children}</div>;
}Modifying <Head>
- app 디렉터리에서 tite, meta와 같은 head 태그를 설정 가능
- 필요한 경우 layout, page에서 metadata 객체를 설정하거나 generateMetadata 함수를 사용해 동적으로 메타데이터를 설정 가능
root layout에 head 태그를 추가하는 것은 권장되지 않음
export const metadata = {
title: 'Next.js'
};
export default function Page() {
return '...'
}출처:
https://beta.nextjs.org/docs/routing/pages-and-layouts#modifying-head
냐아아아아아아아아앙