728x90
next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의
Pages and Layouts
페이지
페이지는 경로에 고유한 UI
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
- 페이지는 항상 경로 하위 트리의 리프임.
- .js, .jsx, .tsx 파일 확장자 사용가능
- 경로 세그먼트에 공개적으로 액세스 하려면 page.js 필요
- 페이지는 기본적으로 서버 컴포넌트지만 클라이언트 컴포넌트로 설정할 수 있음
- 페이지는 데이터를 가져올 수 있음
레이아웃
레이아웃은 여러 페이지간에 공유되는 UI (리렌더링이 안되고 중첩가능)
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode,
}) {
return (
<section>
{/* Include shared UI here e.g. a header or sidebar */}
<nav></nav>
{children}
</section>
);
}
- 최상위 레이아웃을 루트 레이아웃이라 함. 루트레이아웃에는 html과 body 태그가 포함되어야함.
- 모든 경로 세그먼트는 선택적으로 자체 레이아웃을 정의할 수 있음.
- 경로의 레이아웃은 기본적으로 중첩됨
- 경로 그룹을 사용하여 공유 레이아웃 내외부로 특정 경로 세그먼트를 설정할 수 있음.
- 레이아웃은 서버 컴포넌트지만 클라이언트 컴포넌트로 설정할 수 있음
- 레이아웃은 데이터를 가져올 수 있음
- 상위 레이아웃과 해당 레이아웃간에 데이터 전달 불가능, but 경로에서 동일한 데이터를 두번 이상 가져오고 리액트는 요청을 자동으로 중복 제거함.
- layout과 page는 같은 폴더에 정의할 수 있음.
루트 레이아웃(필수)
export default function RootLayout({ children }: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
- app 디렉토리는 루트레이아웃을 포함해야함.
- 루트 레이아웃은 next.js가 자동으로 생성하지 않기 때문에 html, body 태그를 정의해야함
- 내장된 seo 지원을 사용하여 head, title 등을 관리할 수 있음
- 경로 그룹을 사용하여 여러 루트 레이아웃을 만들 수 있음
- 루트 레이아웃은 서버 컴포너트이며 클라이언트 구성요소로 설정할 수 없음
중첩 레이아웃
두 레이아웃을 결합하는 경우 루트 레이아웃은 하위 레이아웃을 래핑하고 하위 레이아웃 내부 경로 세그먼트를 래핑함.
템플릿
기본적으로 레이아웃과 같음.
다른 점은 템플릿을 공유하는 자식 사이를 이동할때 dom요소가 리렌더링됨.
- css 또는 애니메이션 라이브러리를 쓸 때
- useEffect나 useState에 의존하는 기능
- 기본 프레임워크 동작을 변경
권장 : 왠만하면 레이아웃 써라.
export default function Template({ children }: {
children: React.ReactNode
}) {
return <div>{children}</div>;
}
<head> 수정
export const metadata = {
title: 'Next.js'
};
export default function Page() {
return '...'
}
'공부공부 > Next.js 공식문서' 카테고리의 다른 글
| [next.js 공식문서] 06. Error Handling (0) | 2024.02.27 |
|---|---|
| [next.js 공식문서] 05. Loading UI (0) | 2024.02.27 |
| [next.js 공식문서] 04. Linking and Navigating (1) | 2024.02.27 |
| [next.js 공식문서] 02. Defining Routes (0) | 2024.02.26 |
| [next.js 공식문서] 01. Fundamentals (0) | 2024.02.26 |