In the previous tutorial, you learned how the Next.js project structure organizes the app directory and its special files. Now we will use that structure to create route-specific pages and shared layouts.
If you have not created the learning project yet, begin by following our guide to set up your first Next.js application. The examples below target the current Next.js 16 App Router and use TypeScript.
Pages and Layouts at a Glance
Next.js uses file-system routing. Folders inside app define route segments, while special files give those segments behavior. The two files you will use most often are:
page.tsxcreates UI unique to a route and makes that route publicly accessible.layout.tsxcreates shared UI around a page or a deeper layout.
A page answers “what is unique at this URL?” A layout answers “what should remain shared around this part of the application?” Neither file needs "use client" for ordinary static markup; App Router files are Server Components by default.
What Is page.tsx?
A page.tsx file exports the React component displayed for one route. The file name is a Next.js convention: a regular file such as screen.tsx does not expose a route by itself. At the root, app/page.tsx maps to /. Inside app/about, the page maps to /about.
app/page.tsx/app/about/page.tsx/aboutapp/blog/page.tsx/blogapp/blog/[slug]/page.tsx/blog/helloCreating Your First Page
Create app/about/page.tsx and export a default React component:
export default function AboutPage() {
return (
<main>
<h1>About our team</h1>
<p>We build useful web products.</p>
</main>
)
}Visit http://localhost:3000/about. A page can import components, fetch data, and define metadata, but keeping it focused on route content usually makes the boundary easy to understand.
How Folders Create URL Segments
Each normal folder below app adds a segment to the URL. For example, app/dashboard/settings/page.tsx maps to /dashboard/settings. Creating only app/dashboard/settings/ does not create visible page UI; the leaf needs a page.tsx (or a route.ts when you are building an endpoint).
A folder defines a segment in the route tree. A page.tsx file makes that segment accessible as a page. Route groups such as (marketing) and private folders beginning with an underscore follow special rules and do not behave like ordinary URL segments.
What Is layout.tsx?
A layout.tsx file defines UI shared by multiple routes. Next.js renders the active child page or nested layout into its required children prop. During client navigation, shared layouts can remain interactive and preserve state while the page below them changes.
export default function DashboardLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<div className="dashboard">
<aside>Dashboard navigation</aside>
<main>{children}</main>
</div>
)
}layout.tsxpage.tsxUnderstanding the Root Layout
The top-most layout is the root layout. A standard application places it at app/layout.tsx. It is required and must define the <html> and <body> elements. Global fonts, providers, site navigation, and other truly application-wide UI often start here.
import type { Metadata } from 'next'
import './globals.css'
export const metadata: Metadata = {
title: 'Acme Dashboard',
description: 'A practical Next.js application',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Use the Metadata API for titles and descriptions instead of manually writing a <head> element in the root layout. Multiple root layouts are possible, commonly through route groups, but navigating between them causes a full page load. Most beginner applications only need one.
What Does children Mean?
children is the place where Next.js inserts the route content wrapped by a layout. When the URL is /dashboard/settings, the dashboard layout receives the settings page—or another nested layout—as its children. It is regular React composition coordinated by the router.
If you forget to render {children}, the layout itself still appears, but the nested page content has no outlet and will not be visible. You can put children inside any sensible semantic container; it does not have to be a direct child of <body>.
Creating a Shared Layout
Suppose /dashboard, /dashboard/analytics, and /dashboard/settings all need the same sidebar. Place layout.tsx in app/dashboard:
app/
|-- layout.tsx
|-- page.tsx
`-- dashboard/
|-- layout.tsx
|-- page.tsx
|-- analytics/
| `-- page.tsx
`-- settings/
`-- page.tsxThe dashboard layout wraps all three dashboard pages, but it does not wrap unrelated routes such as /about. This route-specific boundary is cleaner than placing a dashboard sidebar in the global root layout and conditionally hiding it elsewhere.
Nested Layouts Explained
Layouts nest automatically according to the route tree. For /dashboard/settings, Next.js composes the root layout, then the dashboard layout, then the settings page. The closest layout does not replace the root layout; it renders inside it.
app/layout.tsxapp/dashboard/layout.tsxapp/dashboard/settings/page.tsxThis composition is valuable when sections have their own navigation, permissions, or visual shell. Avoid adding a layout at every folder simply because the feature exists. Add one when multiple routes genuinely share UI or behavior.
Layout vs Page
| Question | page.tsx | layout.tsx |
|---|---|---|
| Main job | Route-specific UI | Shared wrapping UI |
| Makes a page public? | Yes | No, not by itself |
Receives children? | Not as its routing role | Yes, required |
| Persists during navigation? | Page content changes | Shared layout can be reused |
| Typical content | Heading, route data, feature content | Header, sidebar, section navigation, providers |
Dynamic Pages
Square brackets define a dynamic route segment. The file app/blog/[slug]/page.tsx can render /blog/hello-world and /blog/nextjs-layouts. In current Next.js, params is a promise, so an async Server Component awaits it:
export default async function BlogPostPage({
params,
}: PageProps<'/blog/[slug]'>) {
const { slug } = await params
return <h1>Article: {slug}</h1>
}The globally available PageProps helper receives route-aware types after Next.js generates types during next dev, next build, or next typegen. You can also write the promise type explicitly. A dynamic folder changes how a value is captured; pages and layouts still compose the same way.
A Practical Layout and Page Structure
app/
|-- layout.tsx # Global document shell
|-- page.tsx # /
|-- about/
| `-- page.tsx # /about
|-- dashboard/
| |-- layout.tsx # Dashboard shell
| |-- page.tsx # /dashboard
| `-- settings/
| `-- page.tsx # /dashboard/settings
`-- blog/
|-- page.tsx # /blog
`-- [slug]/
`-- page.tsx # /blog/:slugKeep pages focused on route content and use layouts for UI shared by descendant routes. Components used only by one segment can live near that segment; broadly reusable components can live in a shared location. To revisit which names are framework conventions and which are team choices, see the guide to how App Router folders work.
Common Next.js Layout and Page Mistakes
- Forgetting
page.tsx. A normal route folder alone does not expose page UI. - Confusing layouts with pages. Pages are unique destinations; layouts wrap related destinations.
- Forgetting
{children}. The nested page exists, but the layout never renders its outlet. - Putting everything in the root layout. Route-specific UI such as a dashboard sidebar belongs closer to the routes that use it.
- Adding
"use client"everywhere. Keep layouts and pages as Server Components unless browser APIs, state, effects, or client hooks require a client boundary. - Following outdated examples. In current Next.js, dynamic
paramsand pagesearchParamsare asynchronous. - Mixing router conventions.
pages/_app.tsxbelongs to Pages Router;app/layout.tsxbelongs to App Router.
Next.js Layout Best Practices
- Keep genuinely global UI in the root layout.
- Use nested layouts for shared UI within a route section.
- Keep pages focused on content and data for their route.
- Use Client Components only where interactivity requires them.
- Keep layout markup readable and avoid nesting without a real shared responsibility.
- Colocate route-specific components when it improves discovery.
- Use meaningful landmarks such as
<nav>,<aside>, and<main>, while avoiding duplicate main landmarks in one rendered document.
Frequently Asked Questions
What is a page in Next.js App Router?
A page is UI unique to a route. Export it as the default component from a page.tsx or page.js file.
What is layout.tsx in Next.js?
It is a special file that defines shared UI around the active page or nested layout below its route segment.
What is the difference between layout.tsx and page.tsx?
A page creates route-specific UI and exposes that route. A layout wraps a segment and its descendants with shared UI.
What does {children} mean in a Next.js layout?
It is the slot Next.js fills with the active child page, nested layout, or relevant route UI. Render it where the nested content should appear.
Can Next.js have multiple layouts?
Yes. Segments can define nested layouts, and advanced applications can define separate root layouts with route groups.
What is a nested layout?
It is a layout inside a route segment that renders within the layout above it and wraps all matching descendant routes.
Does every folder inside app create a URL?
Normal folders define URL segments, but the route is not publicly accessible until a page or route file is present. Route groups and private folders are special exceptions.
Can I use a layout for a dashboard?
Yes. Dashboards are a natural use case because several pages can share the same sidebar, top bar, and section navigation.
Official Resources
Continue with the Official Next.js Layouts and Pages Documentation. For deeper details, use the official references for layout.tsx, page.tsx, and dynamic segments.
