https://beta.nextjs.org/docs/routing/pages-and-layouts
위 문서에 대한 번역을 진행합니다.
번역시점은 2023-05-01로 공식문서의 추가적인 업데이트가 있을 수 있습니다.
번역기와 챗지피티에 의존해서 번역하고있습니다.
번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.
한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다.
역자의 개인적인 의견에 대한 내용은
이 안에서 이루어집니다.
Pages and Layouts
이 글을 읽기 전에 라우팅에 대한 기본 사항과 정의를 먼저 읽어보시는 것을 권해드려요
Next.js 13의 app 라우터에는 pages, shared layouts(공유 레이아웃) , template을 쉽게 만들 수 있는 새로운 파일 규칙이 도입되었습니다.
이 페이지에서는 Next.js 애플리케이션에서 이런 특수 파일들을 사용하는 방법을 안내해드립니다!
Pages
page는 경로의 unique(고유한) UI입니다. page.js 파일에서 컴포넌트를 내보내 페이지를 정의할 수 있습니다.
중첩 폴더를 사용하여 경로를 정의하고 page.js 파일을 사용하여 경로를 공개적으로 액세스할 수 있도록 합니다.
app directory에 page.js파일을 추가하는 것을 통해 당신의 첫번째 페이지를 만들어보세요!
Good to know
페이지는 항상 경로 하위 트리의 leaf(리프)입니다.
page에는 .js, .jsx, .tsx 확장자를 사용할 수 있습니다.
경로 세그먼트에 공개적으로 액세스하려면 page.js 파일이 필요합니다.
페이지는 기본적으로는 서버 컴포넌트 이지만 클라이언트 컴포넌트로 설정하는 것도 가능합니다.
페이지는 데이터를 가져올 수 있습니다. 자세한 내용은 데이터 페칭 섹션을 참고하세요
Layouts
layout 은 여러페이지 간에 공유되는 UI입니다.
탐색에서 레이아웃은 상태를 보존하고 리렌더링을 하지 않으며 중첩될 수 있습니다.
레이아웃은 기본적으로 layout.js 파일에서 react 컴포넌트를 내보내는 것을 통해 정의할 수 있습니다.
컴포넌트는 렌더링 중에 자식 레이아웃 또는 자식 페이지로 채워질 자식 프로퍼티를 받아들여야합니다.
app/dashboard/layout.tsx
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>
);
}
가장 위에 있는 layout을 Root layout이라고 불러요 root layout은 required(필수)입니다.
이 root layout은 애플리케이션의 모든 페이지에서 공유되며
HTML 및 body 태그가 포함되어야해요
모든 경로 세그먼트는 선택적으로 자체 레이아웃을 정의할 수 있습니다.
이러한 레이아웃은 해당 세그먼트의 모든 페이지에서 공유됩니다.
경로의 레이아웃은 기본적으로 중첩됩니다. 각 부모 레이아웃은 react 자식 프로퍼티를 사용하여
그 아래의 자식 레이아웃을 감싸줍니다.
라우트 그룹을 사용하여 공유 레이아웃 안팎에서 특정 라우트 세그먼트를 선택할 수 있습니다.
레이아웃은 기본적으로 서버 컴포넌트이지만 클라이언트 컴포넌트로 설정하는 것도 가능합니다.
레이아웃은 데이터를 불러올 수 있습니다. 자세한 내용은 data fetching 섹션을 참고하세요!
상위 레이아웃과 하위 레이아웃 간에는 데이터를 전달할 수 없습니다.
하지만 경로에서 동일한 데이터를 두번 이상 가져올 수 있으며 React는 성능에 영향을 주지 않으면서 중복된 요청을 자동으로 제거합니다.
레이아웃에는 .js, .jsx, .tsx 확장자를 사용할 수 있습니다.
layout.js와 page.js 파일을 같은 폴더에 정의할 수 있으며 레이아웃이 페이지를 감싸게 됩니다.
Root Layout
루트 레이아웃은 앱디렉토리의 root에서 정의되며 모든 경로에 적용됩니다.
이 레이아웃을 사용하면 서버에서 반환된 초기 HTML을 수정할 수 있습니다.
Good to know
app 디렉토리에는 루트레이아웃이 포함되어야 합니다.
Next.js가 자동으로 생성해주지 않기 때문에 loot layout에서 html과 body 태그를 정의해줘야합니다.
기본 제공되는 seo support를 이용하여 head elements를 작성할 수 있습니다(title같은)
route groups을 사용해서 여러개의 root layout을 만들 수 있습니다. 예시를 참고하세요!
root layout은 기본적으로 서버 컴포넌트이고 클라이언트 컴포넌트로 설정할 수 없습니다.
Nesting Layouts
폴더 내에 정의된 레이아웃은 특정 경로 세그먼트에서 적용되며
해당 세그먼트가 활성화 될 때 렌더링됩니다.
기본적으로 파일 계층 구조의 레이아웃은 중첩되어 있기때문에 children prop을 통해 children 레이아웃을 감싸줍니다.
위의 두 레이아웃을 결합하면 루트 레이아웃이 대시보드 레이아웃을 감싸는 형태가 됩니다.
대시보드 레이아웃은 app/dashboard 안에 중첩된 경로의 레이아웃을 또 감싸게됩니다.
이렇게 두 레이아웃은 중첩됩니다!(사진참고)
Route Groups을 사용하여 공유 레이아웃 안팎에서 특정 경로 세그먼트를 선택할 수도 있습니다.
Templates
템플릿은 각 하위 레이아웃 또는 페이지를 래핑한다는 점에서 레이아웃과 유사합니다.
경로 전체에서 지속되고 상태를 유지하는 레이아웃과 달리 템플릿은 탐색 시 각 하위 레이아웃에 대해 새 인스턴스를 생성합니다.
즉 사용자가 템플릿을 공유하는 경로 사이를 탐색할 때 컴포넌트의 새 인스턴스가 마운트되고
DOM 요소가 다시 생성되며 / 상태는 보존되지 않고 / 효과가 다시 synchronized 됩니다.
특정 동작이 필요한 경우에는 layout보다 template이 더 적합할 수 있어요
-CSS 또는 animation 라이브러리를 사용하여 애니메이션을 시작/ 종료하는 경우
-useEffect, useState에 의존하는 경우(ex : 페이지별 피드백 양식)
- 기본 프레임워크의 동작을 변경하는 경우(예를들어 레이아웃 내부의 suspense Boundaries는 layout을 처음 로드할때만 fallback을 표시하고 페이지를 전환할 때는 표시하지 않지만 템플릿의 경우 각 탐색에 fallback이 표시됨)
Recommendation
템플릿을 사용해야할 특별한 이유가 없다면 레이아웃을 쓰는게 좋습니다.
템플릿은 template.js 파일에서 기본 React 컴포넌트를 내보내서 정의할 수 있어요
컴포넌트는 중첩된 세그먼트가 될 children 프로퍼티를 허용해야합니다.
레이아웃과 탬플릿이 있는 경로 세그먼트의 렌더링된 출력을 다음과 같습니다.
역주 : 레이아웃이 템플릿을 감싸고 템플릿이 페이지를 감싸는 구조가 된다는 걸 말하는 듯함.
Modifying <head>
app directory에서 기본 제공하는 SEO 지원을 사용해서 title, meta 등 <head> 태그에서 사용하는 HTML 요소들을 수정할 수 있습니다.
metadata는 메타데이터 객체를 내보내거나 layout.js , page.js 파일에서 generateMetadata함수를 사용하여 정의할 수 있습니다.
export const metadata = {
title: 'Next.js'
};
export default function Page() {
return '...'
}Good to know
root layout에 title, meta와 같은 head 태그를 수동으로 추가하면 안됩니다.
대신 head 요소의 스트리밍 및 중복제거와 같은 고급 요구 사항을 자동으로 처리하는 메타데이터 API를 사용해야합니다.
역주 : 이전에는 head.js 파일을 이용해 head 태그 안의 내용물들을 적용해주었는데
이 부분을 metadata 객체를 정의하는 것으로 대체하라는 의미입니다.
'Next.js Beta Docs 번역' 카테고리의 다른 글
| [Data Fetching] (6) ErrorHandling Next.js Beta Docs (0) | 2023.05.03 |
|---|---|
| [Data Fetching] (5) LoadingUI Next.js Beta Docs (0) | 2023.05.02 |
| [Data Fetching] (4) Linking and Navigating Next.js Beta Docs (0) | 2023.05.01 |
| [Data Fetching] (2) Data Fetching Next.js Beta Docs (0) | 2023.05.01 |
| [Data Fetching] (1) Fundamentals Next.js Beta Docs (0) | 2023.05.01 |
