Layouts and Pages
Learn how to create your first pages and shared layouts in Next.js.
Pages
A page is UI that is unique to a route. You can define a page by default exporting a component from a page.js file.
For example, to create your index page, add the page.js file inside the app directory:
export default function Page() {
return <h1>Hello, Next.js!</h1>
}Layouts
A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render.
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 page during rendering.
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<section>
<nav>Dashboard Navigation</nav>
{children}
</section>
)
}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.
Good to know: We recommend using layouts unless you have a specific reason to use a template.
Metadata
You can modify the <head> HTML elements such as title and meta by exporting a metadata object or generateMetadata function in a layout or page.
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function Page() {
return '...'
}