4
Chapter 4 第4章
Creating Layouts and Pages
创建布局和页面
So far, your application only has a home page. Let's learn how you can create more routes with layouts and pages.
到目前为止,您的应用程序只有一个主页。让我们了解如何使用布局和页面创建更多路线。
In this chapter... 在本章中...
Here are the topics we’ll cover
以下是我们将讨论的主题
Create the dashboard
routes using file-system routing.
使用文件系统路由创建dashboard
路由。
Understand the role of folders and files when creating new route segments.
了解创建新路线段时文件夹和文件的作用。
Create a nested layout that can be shared between multiple dashboard pages.
创建可在多个仪表板页面之间共享的嵌套布局。
Understand what colocation, partial rendering, and the root layout are.
了解什么是共置、部分渲染和根布局。
Nested routing 嵌套路由
Next.js uses file-system routing where folders are used to create nested routes. Each folder represents a route segment that maps to a URL segment.
Next.js 使用文件系统路由,其中文件夹用于创建嵌套路由。每个文件夹代表一个映射到URL 段的路由段。
You can create separate UIs for each route using layout.tsx
and page.tsx
files.
您可以使用layout.tsx
和page.tsx
文件为每个路由创建单独的UI。
page.tsx
is a special Next.js file that exports a React component, and it's required for the route to be accessible. In your application, you already have a page file: /app/page.tsx
- this is the home page associated with the route /
.page.tsx
是一个特殊的 Next.js 文件,它导出 React 组件,并且需要它才能访问路由。在您的应用程序中,您已经有一个页面文件: /app/page.tsx
- 这是与路线/
关联的主页。
To create a nested route, you can nest folders inside each other and add page.tsx
files inside them. For example:
要创建嵌套路由,您可以将文件夹相互嵌套并在其中添加page.tsx
文件。例如:
/app/dashboard/page.tsx
is associated with the /dashboard
path. Let's create the page to see how it works!/app/dashboard/page.tsx
与/dashboard
路径关联。让我们创建页面来看看它是如何工作的!
Creating the dashboard page
创建仪表板页面
Create a new folder called dashboard
inside /app
. Then, create a new page.tsx
file inside the dashboard
folder with the following content:
在/app
内创建一个名为dashboard
的新文件夹。然后,在dashboard
文件夹中创建一个新的page.tsx
文件,其中包含以下内容:
export default function Page() {
return <p>Dashboard Page</p>;
}
Now, make sure that the development server is running and visit http://localhost:3000/dashboard. You should see the "Dashboard Page" text.
现在,确保开发服务器正在运行并访问http://localhost:3000/dashboard 。您应该看到“仪表板页面”文本。
This is how you can create different pages in Next.js: create a new route segment using a folder, and add a page
file inside it.
您可以通过以下方式在 Next.js 中创建不同的页面:使用文件夹创建新的路由段,并在其中添加page
文件。
By having a special name for page
files, Next.js allows you to colocate UI components, test files, and other related code with your routes. Only the content inside the page
file will be publicly accessible. For example, the /ui
and /lib
folders are colocated inside the /app
folder along with your routes.
Practice: Creating the dashboard pages
练习:创建仪表板页面
Let's practice creating more routes. In your dashboard, create two more pages:
让我们练习创建更多路线。在您的仪表板中,再创建两个页面:
- Customers Page: The page should be accessible on http://localhost:3000/dashboard/customers. For now, it should return a
<p>Customers Page</p>
element. - Invoices Page: The invoices page should be accessible on http://localhost:3000/dashboard/invoices. For now, also return a
<p>Invoices Page</p>
element.
发票页面:发票页面应可通过http://localhost:3000/dashboard/invoices 访问。目前,还返回<p>Invoices Page</p>
元素。
Spend some time tackling this exercise, and when you're ready, expand the toggle below for the solution:
花一些时间来完成此练习,当您准备好时,展开下面的切换按钮以获取解决方案:
You should have the following folder structure:
您应该具有以下文件夹结构:
Customers Page: 客户页面:
export default function Page() {
return <p>Customers Page</p>;
}
Invoices Page: 发票页面:
export default function Page() {
return <p>Invoices Page</p>;
}
Creating the dashboard layout
创建仪表板布局
Dashboards have some sort of navigation that is shared across multiple pages. In Next.js, you can use a special layout.tsx
file to create UI that is shared between multiple pages. Let's create a layout for the dashboard pages!
仪表板具有某种跨多个页面共享的导航。在 Next.js 中,您可以使用特殊的layout.tsx
文件来创建在多个页面之间共享的 UI。让我们为仪表板页面创建一个布局!
Inside the /dashboard
folder, add a new file called layout.tsx
and paste the following code:
在/dashboard
文件夹中,添加一个名为layout.tsx
的新文件并粘贴以下代码:
/应用程序/仪表板/layout.tsx
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}
A few things are going on in this code, so let's break it down:
这段代码中发生了一些事情,所以让我们将其分解:
First, you're importing the <SideNav />
component into your layout. Any components you import into this file will be part of the layout.
首先,您将<SideNav />
组件导入到您的布局中。您导入到此文件中的任何组件都将成为布局的一部分。
The <Layout />
component receives a children
prop. This child can either be a page or another layout. In your case, the pages inside /dashboard
will automatically be nested inside a <Layout />
like so:<Layout />
组件接收一个children
属性。该子项可以是页面或其他布局。在您的情况下, /dashboard
内的页面将自动嵌套在<Layout />
内,如下所示:
Check that everything is working correctly by saving your changes and checking your localhost. You should see the following:
One benefit of using layouts in Next.js is that on navigation, only the page components update while the layout won't re-render. This is called partial rendering:
Root layout
In Chapter 3, you imported the Inter
font into another layout: /app/layout.tsx
. As a reminder:
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}
This is called a root layout and is required. Any UI you add to the root layout will be shared across all pages in your application. You can use the root layout to modify your <html>
and <body>
tags, and add metadata (you'll learn more about metadata in a later chapter).
Since the new layout you've just created (/app/dashboard/layout.tsx
) is unique to the dashboard pages, you don't need to add any UI to the root layout above.
It’s time to take a quiz!
Test your knowledge and see what you’ve just learned.
What is the purpose of the layout file in Next.js?
You've Completed Chapter 4
Nice, the dashboard app is slowly starting to come together.
Was this helpful?