# Next\.js Layouts RFC in 5 minutes
**Published:** September 14, 2022 | **Authors:** Lee Robinson | **Category:** Field Engineering
---
The Next.js team at Vercel released the [Layouts RFC](https://nextjs.org/blog/layouts-rfc) a few months ago outlining the vision for the future of routing, layouts, and data fetching in the framework. The RFC is detailed and covers both basic and advanced features.
This post will cover the most important features of the upcoming Next.js changes landing in the next major version that you should be aware of.
## Creating Routes
In the new `app` directory, folders are used to define routes. To create a route, add a `page.js` file inside a folder. For example, `app/page.js`:
**app/page.js**
```jsx
export default function Page() {
return Hello, Next.js!
}
```
A page (with the `page.js` naming convention) is UI that is unique to a specific route segment. In this instance, the route segment is `/` (or the [root segment](https://nextjs.org/blog/layouts-rfc#route-segments)).
*Each route segment is mapped to a corresponding segment in a URL path.*
You can incrementally adopt the `app` directory from the existing `pages` directory.
## Creating Layouts
You can create nestable layouts that are shared across pages by adding `layout.js` files.
*Creating routes using pages and layouts.*
To make your first layout, you will create a new file `app/layout.js`.
**app/layout.js**
```jsx
export default function RootLayout({ children }) {
return (
Next.js Layouts RFC in 5 Minutes
{children}
);
}
```
`app/page.js` above will render as a child of `app/layout.js`:
```html
Next.js Layouts RFC in 5 Minutes
Hello, Next.js!
```
## Sharing Layouts
Layouts can be shared across different pages. Every route in `app/` shares the same root layout, defined at `app/layout.js`. For example, if we created a new route segment `app/blog/page.js`:
**app/blog/page.js**
```jsx
export default function BlogPage() {
return Blog Posts
}
```
This page would use the same root layout. `app/blog/page.js` would render as a child of `app/layout.js`.
```html
Next.js Layouts RFC in 5 Minutes
Blog Posts
```
If we wanted a custom layout for this route segment, we would create a new layout at `app/blog/layout.js`. For example, maybe our blog needs a sidebar navigation layout:
**app/blog/layout.js**
```jsx
export default function BlogLayout({ children }) {
return (
<>
{children}
)
}
```
`app/blog/page.js `would render as a child of `app/layout.js` and `app/blog/layout.js`:
```html
Next.js Layouts RFC in 5 Minutes
Blog Posts
```
Similarly, if we created a nested dynamic route `app/blog/[slug]/page.js` for an individual blog post, it would also use the same layouts:
**app/blog/[slug]/page.js**
```jsx
export default function IndividualBlogPost() {
return (
Routing with Next.js
Lorem ipsum dolor sit amet
)
}
```
```html
Next.js Layouts RFC in 5 Minutes
Routing with Next.js
Lorem ipsum dolor sit amet
```
## Loading & Error Boundaries
`loading.js` automatically wraps a page or nested segment in a React Suspense Boundary. Next.js will show your loading component immediately on the first load and again when navigating between sibling routes.
You can use this to create *meaningful* loading UI for specifics part of your UI.
*The Next.js Loading UI creates a React Suspense boundary.*
`error.js` automatically wraps a page or nested segment in a [React Error Boundary](https://reactjs.org/docs/error-boundaries.html). Next.js will show your error component whenever an error in a subtree is caught.
*The Next.js Error UI creates a React error boundary.*
Use this to isolate errors to specific parts of an app, show specific error information, and attempt to recover.
## Route Groups
Route groups can be used to:
- Organize routes without affecting the URL path
- Opt a segment out of a layout
- Create multiple root layouts for sections of an app with a completely different UI
*You can exclude routes from layouts using route groups.*
## Summary
An example `app` directory using some of the above concepts would look as follows:
[Read the full Layouts RFC](https://nextjs.org/blog/layouts-rfc) and stay tuned for more information from the Next.js team at Vercel.
---
**More posts:** [View all blog posts](https://vercel.com/blog/sitemap.md) | [Changelog](https://vercel.com/changelog/sitemap.md)