Next.js - Pages and Layouts 공식문서 정리,번역🥸
Pages
- 페이지는 route에 고유한 UI
- 페이지는 항상 경로 하위 트리의 리프
- page.js 파일에서 컴포넌트를 내보내 페이지를 정의할 수 있다.
- 페이지는 데이터를 가져올 수 있다.
Layouts
- layout은 여러 페이지 간에 공유되는 UI
- layout은 상태를 보존하고, 인터랙티브를 유지하고 재렌더링을 하지 않는다.
- 레이아웃은 중첩 될 수도 있다.
- layout.js 파일에서 default export로 정의할 수 있다.
- child 레이아웃이나 child 페이지가 있는 경우에, 항상 children props를 설정해야한다.
export default function DashboardLayout({
children, //페이지가 있거나, 중첩된 레이아웃이 있는 경우
}: {
children: React.ReactNode
}) {
return (
<section>
{/* 헤더나 사이드바처럼 공유되는 UI를 정의할 수 있다. */}
<nav></nav>
{children}
</section>
)
}- 최상위 레이아웃을 루트 레이아웃 이라고 한다. 이 필수 레이아웃은 애플리케이션의 모든 페이지에서 공유된다. 루트 레이아웃에는 html및 body태그가 포함되어야 합니다.
- 모든 경로 세그먼트는 선택적으로 자체 레이아웃을 정의할 수 있다. 이러한 레이아웃은 해당 세그먼트의 모든 페이지에서 공유된다.
- 레이아웃은 기본적으로 children props를 통해 중첩된다.
- 레이아웃은 기본적으로 서버 컴포넌트이지만 클라이언트 컴포넌트로 설정할 수 있다.
- 레이아웃은 데이터를 패치할 수 있다.
Root Layout
- 디렉토리 app는 루트 레이아웃을 포함 해야 한다 .
- 루트 레이아웃은 디렉터리의 최상위 수준에서 정의되며 app모든 경로에 적용
- 루트 레이아웃은 반드시
<html>,<body>를 포함해야한다. - 기본 제공 SEO 지원(Metadata)을 사용하여
<head>HTML 요소(예:<title>요소)를 관리할 수 있다.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}진행중인 프로젝트 폴더 구조
진행중인 프로젝트 RootLayout
import "./globals.css";
import { Open_Sans } from "next/font/google";
import Header from "@/components/Header";
const sans = Open_Sans({ subsets: ["latin"] });
export const metadata = {
title: {
default: "이성은 포트폴리오",
template: "이성은 포트폴리오 | %s",
},
description: "프론트엔드 개발자 이성은 포트폴리오",
icons: {
icon: "/favicon.ico",
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={sans.className}>
<body className="flex flex-col w-full max-w-auto mx-auto">
<Header />
<main className="grow">{children}</main>
</body>
</html>
);
}
함께 일하는 프론트엔드 개발자 이성은입니다🐥