Pages and Layouts
We recommend reading the Routing Fundamentals and Defining Routes pages before continuing.

The App Router inside Next.js 13 introduced new file conventions to easily create pages, shared layouts, and templates. This page will guide you through how to use these special files in your Next.js application.

Pages
A page is UI that is unique to a route. You can define pages by exporting a component from a page.js file. Use nested folders to define a route and a page.js file to make the route publicly accessible.

Create your first page by adding a page.js file inside the app directory:

Page File
app/page.js
// `app/page.js` is the UI for the root `/` URL
export default function Page() {
 return Hello, Next.js!
===============

;
}
Good to know:

A page is always the leaf of the route subtree.
.js, .jsx, or .tsx file extensions can be used for Pages.
A page.js file is required to make a route segment publicly accessible.
Pages are Server Components by default but can be set to a Client Component.
Pages can fetch data. View the Data Fetching section for more information.
Layouts
A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.

You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a child page during rendering.

Layout File
app/dashboard/layout.tsx
export default function DashboardLayout({
 children, // will be a page or nested layout
}: {
 children: React.ReactNode,
}) {
 return (
 
 {/\* Include shared UI here e.g. a header or sidebar \*/}
 

 {children}
 
 );
}
Good to know:

The top-most layout is called the Root Layout. This required layout is shared across all pages in an application. Root layouts must contain html and body tags.
Any route segment can optionally define its own Layout. These layouts will be shared across all pages in that segment.
Layouts in a route are nested by default. Each parent layout wraps child layouts below it using the React children prop.
You can use Route Groups to opt specific route segments in and out of shared layouts.
Layouts are Server Components by default but can be set to a Client Component.
Layouts can fetch data. View the Data Fetching section for more information.
Passing data between a parent layout and its children is not possible. However, you can fetch the same data in a route more than once, and React will automatically dedupe the requests without affecting performance.
.js, .jsx, or .tsx file extensions can be used for Layouts.
A layout.js and page.js file can be defined in the same folder. The layout will wrap the page.
Root Layout (Required)
The root layout is defined at the top level of the app directory and applies to all routes. This layout enables you to modify the initial HTML returned from the server.

app/layout.tsx
export default function RootLayout({ children }: {
 children: React.ReactNode;
}) {
 return (
 
 {children}
 
 );
}
Good to know:

The app directory must include a root layout.
The root layout must define and tags since Next.js does not automatically create them.
You can use the built-in SEO support to manage HTML elements, for example, the element.
You can use route groups to create multiple root layouts. See an example here.
The root layout is a Server Component by default and can not be set to a Client Component.
Migrating from the pages directory: The root layout replaces the \_app.js and \_document.js files. View the migration guide.

Nesting Layouts
Layouts defined inside a folder (e.g. app/dashboard/layout.js) apply to specific route segments (e.g. acme.com/dashboard) and render when those segments are active. By default, layouts in the file hierarchy are nested, which means they wrap child layouts via their children prop.

Nested Layout
app/dashboard/layout.tsx
export default function DashboardLayout({
 children,
}: {
 children: React.ReactNode,
}) {
 return <section>{children}</section>;
}
If you were to combine the two layouts above, the root layout (app/layout.js) would wrap the dashboard layout (app/dashboard/layout.js), which would wrap route segments inside app/dashboard/\*.

The two layouts would be nested as such:

Nested Layouts UI
You can use Route Groups to opt specific route segments in and out of shared layouts.

Templates
Templates are similar to layouts in that they wrap each child layout or page. Unlike layouts that persist across routes and maintain state, templates create a new instance for each of their children on navigation. This means that when a user navigates between routes that share a template, a new instance of the component is mounted, DOM elements are recreated, state is not preserved, and effects are re-synchronized.

There may be cases where you need those specific behaviors, and templates would be a more suitable option than layouts. For example:

Enter/exit animations using CSS or animation libraries.
Features that rely on useEffect (e.g logging page views) and useState (e.g a per-page feedback form).
To change the default framework behavior. For example, Suspense Boundaries inside layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.
Recommendation: We recommend using Layouts unless you have a specific reason to use Template.

A template can be defined by exporting a default React component from a template.js file. The component should accept a children prop which will be nested segments.

Template File
app/template.tsx
export default function Template({ children }: {
 children: React.ReactNode
}) {
 return <div>{children}</div>;
}
The rendered output of a route segment with a layout and a template will be as such:

Output
<Layout>
 {/\* Note that the template is given a unique key. \*/}
 <Template key={routeParam}>{children}</Template>
</Layout>
Modifying <head>
In the app directory, you can modify the <head> HTML elements such as title and meta using the built-in SEO support:

app/page.tsx
export const metadata = {
 title: 'Next.js'
};

export default function Page() {
 return '...'
}
Alternatively, you can use generateMetadata to fetch metadata that requires dynamic values.

app/page.tsx
export async function generateMetadata({ params, searchParams }) {
 return { title: 'Next.js' };
}

export default function Page() {
 return '...'
}
Learn more about available metadata options in the API reference.

Next Steps
Linking and Navigating
Learn how to link and navigate between routes.
layout.js
Required and optional params for layout files.
page.js
Required and optional params for page files.
template.js
Required and optional params for template files.
Metadata API Reference
View all available options for the metadata object.
페이지 및 레이아웃계속하기 전에 라우팅 기본 사항 및 라우팅 정의 페이지를 읽어보시기 바랍니다.Next.js 13의 앱 라우터에는 페이지, 공유 레이아웃 및 템플릿을 쉽게 만들 수 있는 새로운 파일 규칙이 도입되었습니다. 이 페이지에서는 Next.js 애플리케이션에서 이러한 특수 파일을 사용하는 방법을 안내합니다.페이지페이지는 경로에 고유한 UI입니다. page.js 파일에서 컴포넌트를 내보내 페이지를 정의할 수 있습니다. 중첩 폴더를 사용하여 경로를 정의하고 page.js 파일을 사용하여 경로를 공개적으로 액세스할 수 있도록 합니다.앱 디렉토리에 page.js 파일을 추가하여 첫 번째 페이지를 만듭니다:페이지 파일app/page.js// `app/page.js`는 루트 `/` URL의 UI입니다.내보내기 기본 함수 Page() { return Hello, Next.js!===============;}알아두면 좋습니다:페이지는 항상 경로 하위 트리의 리프입니다.페이지에는 .js, .jsx 또는 .tsx 파일 확장자를 사용할 수 있습니다.경로 세그먼트에 공개적으로 액세스하려면 page.js 파일이 필요합니다.페이지는 기본적으로 서버 컴포넌트이지만 클라이언트 컴포넌트로 설정할 수 있습니다.페이지는 데이터를 가져올 수 있습니다. 자세한 내용은 데이터 가져오기 섹션을 참조하세요.레이아웃레이아웃은 여러 페이지 간에 공유되는 UI입니다. 탐색에서 레이아웃은 상태를 보존하고 대화형 상태를 유지하며 다시 렌더링하지 않습니다. 레이아웃은 중첩할 수도 있습니다.레이아웃은 기본적으로 layout.js 파일에서 React 컴포넌트를 내보내서 정의할 수 있습니다. 컴포넌트는 렌더링 중에 자식 레이아웃(있는 경우) 또는 자식 페이지로 채워질 자식 프로퍼티를 받아들여야 합니다.레이아웃 파일app/dashboard/layout.tsx내보내기 기본 함수 DashboardLayout({ children, // 페이지 또는 중첩 레이아웃이 될 것입니다.}: { children: React.ReactNode,}) { return (  {/\* 헤더 또는 사이드바 등 공유 UI를 여기에 포함 \*/}  {children}  );}알아두면 좋습니다:가장 위에 있는 레이아웃을 루트 레이아웃이라고 합니다. 이 필수 레이아웃은 애플리케이션의 모든 페이지에서 공유됩니다. 루트 레이아웃에는 HTML과 본문 태그가 포함되어야 합니다.모든 경로 세그먼트는 선택적으로 자체 레이아웃을 정의할 수 있습니다. 이러한 레이아웃은 해당 세그먼트의 모든 페이지에서 공유됩니다.경로의 레이아웃은 기본적으로 중첩됩니다. 각 부모 레이아웃은 React 자식 프로퍼티를 사용하여 그 아래의 자식 레이아웃을 감싸줍니다.라우트 그룹을 사용하여 공유 레이아웃 안팎에서 특정 라우트 세그먼트를 선택할 수 있습니다.레이아웃은 기본적으로 서버 컴포넌트이지만 클라이언트 컴포넌트로 설정할 수 있습니다.레이아웃은 데이터를 불러올 수 있습니다. 자세한 내용은 데이터 가져오기 섹션을 참조하세요.상위 레이아웃과 하위 레이아웃 간에 데이터를 전달할 수 없습니다. 하지만 경로에서 동일한 데이터를 두 번 이상 가져올 수 있으며, React는 성능에 영향을 주지 않고 요청을 자동으로 중복 제거합니다.레이아웃에는 .js, .jsx 또는 .tsx 파일 확장자를 사용할 수 있습니다.layout.js와 page.js 파일은 같은 폴더에 정의할 수 있습니다. 레이아웃이 페이지를 감싸게 됩니다.루트 레이아웃(필수)루트 레이아웃은 앱 디렉터리의 최상위 레벨에 정의되며 모든 경로에 적용됩니다. 이 레이아웃을 사용하면 서버에서 반환된 초기 HTML을 수정할 수 있습니다.app/layout.tsx내보내기 기본 함수 RootLayout({ children }: { children: React.ReactNode;}) { return (  {children}  );}알아두면 좋습니다:앱 디렉토리에 루트 레이아웃이 포함되어야 합니다.루트 레이아웃은 Next.js가 자동으로 생성하지 않으므로 정의하고 태그를 지정해야 합니다.기본 제공 SEO 지원을 사용하여 HTML 요소(예: 요소)를 관리할 수 있습니다.루트 그룹을 사용하여 여러 루트 레이아웃을 만들 수 있습니다. 여기에서 예시를 참조하세요.루트 레이아웃은 기본적으로 서버 컴포넌트이며 클라이언트 컴포넌트로 설정할 수 없습니다.페이지 디렉토리에서 마이그레이션하기: 루트 레이아웃은 \_app.js 및 \_document.js 파일을 대체합니다. 마이그레이션 가이드를 참조하세요.레이아웃 중첩폴더(예: 앱/대시보드/layout.js) 내에 정의된 레이아웃은 특정 경로 세그먼트(예: acme.com/dashboard)에 적용되며 해당 세그먼트가 활성화될 때 렌더링됩니다. 기본적으로 파일 계층 구조의 레이아웃은 중첩되어 있으므로 하위 레이아웃이 하위 프로퍼티를 통해 하위 레이아웃을 감싸게 됩니다.중첩 레이아웃app/dashboard/layout.tsx내보내기 기본 함수 DashboardLayout({ children,}: { children: React.ReactNode,}) { 반환 <섹션>{자식들}</section>;}위의 두 레이아웃을 결합하면 루트 레이아웃(app/layout.js)이 대시보드 레이아웃(app/dashboard/layout.js)을 감싸고, 대시보드 레이아웃은 app/dashboard/\* 내부의 경로 세그먼트를 감싸게 될 것입니다.두 레이아웃은 이렇게 중첩됩니다:중첩된 레이아웃 UI경로 그룹을 사용하여 공유 레이아웃 안팎에서 특정 경로 세그먼트를 선택할 수 있습니다.템플릿템플릿은 각 하위 레이아웃 또는 페이지를 감싼다는 점에서 레이아웃과 유사합니다. 경로 전체에서 지속되고 상태를 유지하는 레이아웃과 달리 템플릿은 탐색 시 각 하위 레이아웃에 대해 새 인스턴스를 만듭니다. 즉, 사용자가 템플릿을 공유하는 경로 사이를 탐색할 때 컴포넌트의 새 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 상태가 보존되지 않고, 효과가 다시 동기화됩니다.이러한 특정 동작이 필요한 경우 레이아웃보다 템플릿이 더 적합한 옵션이 될 수 있습니다. For 