Skip to content

Commit

Permalink
Docs: Fix headings in Layouts and Pages (vercel#73268)
Browse files Browse the repository at this point in the history
  • Loading branch information
delbaoliveira authored Nov 27, 2024
1 parent 3d5aa27 commit 6e8d84b
Showing 1 changed file with 3 additions and 8 deletions.
11 changes: 3 additions & 8 deletions docs/01-app/01-getting-started/02-layouts-and-pages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ title: How to create layouts and pages
nav_title: Layouts and Pages
description: Learn how to create layouts and pages in your Next.js application, and link between them.
related:
title: Learn more about the features mentioned in this page.
links:
- app/api-reference/file-conventions/layout
- app/api-reference/file-conventions/page
Expand Down Expand Up @@ -84,11 +83,7 @@ export default function DashboardLayout({ children }) {
}
```

The layout above is called a [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts) because it's defined at the root of the `app` directory.

### Root Layout (Required)

The root layout is defined at the top level and wraps all routes. This layout is **required** and must contain `html` and `body` tags.
The layout above is called a [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts) because it's defined at the root of the `app` directory. The root layout is **required** and must contain `html` and `body` tags.

## Creating a nested route

Expand Down Expand Up @@ -175,7 +170,7 @@ export default function Page() {

> **Good to know**: Wrapping a folder name in square brackets (e.g. `[slug]`) creates a special **dynamic route segment** used to generate multiple pages from data. This is useful for blog posts, product pages, etc. Learn more about [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes).
### Nesting layouts
## Nesting layouts

By default, layouts in the folder hierarchy are also nested, which means they wrap child layouts via their `children` prop. You can nest layouts by adding `layout` inside specific route segments (folders).

Expand Down Expand Up @@ -207,7 +202,7 @@ export default function BlogLayout({ children }) {

If you were to combine the two layouts above, the root layout (`app/layout.js`) would wrap the blog layout (`app/blog/layout.js`), which would wrap the blog (`app/blog/page.js`) and blog post page (`app/blog/[slug]/page.js`).

## Linking between pages
## Linking between pages

You can use the [`<Link>` component](/docs/app/api-reference/components/link) to navigate between routes. `<Link>` is a built-in Next.js component that extends the HTML `<a>` tag to provide prefetching and client-side navigation.

Expand Down

0 comments on commit 6e8d84b

Please sign in to comment.