고정 헤더 영역
상세 컨텐츠
본문
반응형
Next.JS 안의 App Router는 page, layout, template 을 쉽게 만들 수 있는 규칙을 소개 합니다.
1. Pages
하나의 page는 유일한 UI 입니다. 하나의 page.js 로 부터, 하나의 컴포넌트로, 엑스포트 되어서 page 들이 정의 됩니다. page.js 파일을 설치하여, 공개적으로 접근 할 수 있도록 중첩폴더( Nested folders )를 이용합니다.
// app/page.tsx의 URL 경로는 `/`
export default function Page() {
return <h1>Hello, Home page!</h1>;
}// app/dashboard/page.tsx의 URL 경로는`/dashboard`
export default function Page() {
return <h1>Hello, Dashboard Page!</h1>;
}- page는 경로구조에서 최 말단 입니다. (Next.JS에서의 tree 구조에서는 leaf로 부름 )
- .js, .jsx, .tsx 확장자를 붙일 수 있습니다.
- 공개적으로 접근하려면 page.js 이 필수입니다.
- pages 는 디폴트가 Server Compnents 이지만 Client Component 로 설정 변경 할 수 있습니다.
- pages 는 데이터를 가져올 수 있습니다. Data Fetching ( 데이터 가져오기 ) 에서 추가 설명
2. Layouts
하나의 레이아웃 파일은 여러 page 파일들 에서 공유되는 UI 입니다. 아래 이미지의 layout.js는 dashboard/page 와 settings/page 두 파일에 영향을 줍니다.
export default function DashboardLayout({
children, // 칠드런은 page 또는 중첩레이아웃
}: {
children: React.ReactNode;
}) {
return (
<section>
{/* Include shared UI here e.g. a header or sidebar */}
<nav></nav>
{children}
</section>
);
}- 최 상위 layout은 RootLayout 으로 불리며, 필수 레이아웃입니다. RootLayout에는 <html /> <body /> 가 필수로 있어야 합니다.
- app 디랙토리는 root layout을 필수적으로 갖고 있어야 합니다.
- 부모레이아웃과 지식레이아웃 사이에 데이터 전달은 불가능 합니다만, 하나의 라우터에서 같은 데이터를 한 번이상도 성능 저하없이 가져 올 수 있습니다.
- layout.js 와 page.js 파일은 같은 폴더 안에 있을 수 있으며, 이 때도 page를 포함합니다.
( root layout 이 이전 버젼의 _app.js와 _document.js 를 대체하였습니다. )
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
'Next.js' 카테고리의 다른 글
| next.js <Image /> 관련하여 layout shift 란 (0) | 2023.10.31 |
|---|---|
| NextResponse(JSON.stringify( )), NextResponse.json( ) (1) | 2023.08.14 |
| Create Routes (경로 만들기) - Next.JS 13.4 (0) | 2023.06.05 |
| Next.JS 프로젝트 설계 ( III ) (0) | 2023.06.05 |
| Next.JS 프로젝트 설계 ( II ) (0) | 2023.06.05 |
