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.
到目前为止，您的应用程序只有一个主页。让我们了解如何使用布局和页面创建更多路线。

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:
让我们练习创建更多路线。在您的仪表板中，再创建两个页面：

1. Customers Page: The page should be accessible on http://localhost:3000/dashboard/customers. For now, it should return a <p>Customers Page</p> element.
2. 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:
花一些时间来完成此练习，当您准备好时，展开下面的切换按钮以获取解决方案：

Hide the solution 隐藏解决方案

You should have the following folder structure:
您应该具有以下文件夹结构：

Customers Page: 客户页面：

/app/dashboard/customers/page.tsx

export default function Page() {
  return <p>Customers Page</p>;
}

Invoices Page: 发票页面：

/app/dashboard/invoices/page.tsx

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的新文件并粘贴以下代码：

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.