章节4

创建布局和页面

到目前为止，您的应用程序只有一个主页。让我们学习如何使用布局和页面创建更多路由。

本章内容...

以下是我们将涵盖的主题

使用文件系统路由创建 dashboard 路由。

了解文件夹和文件在创建新路由段时的作用。

创建一个可以在多个仪表板页面之间共享的嵌套布局。

了解什么是并置、部分渲染和根布局。

嵌套路由

Next.js 使用文件系统路由，其中文件夹用于创建嵌套路由。每个文件夹代表一个路由段，该段映射到一个 URL 段。

Diagram showing how folders map to URL segments

您可以使用 layout.tsx 和 page.tsx 文件为每个路由创建单独的 UI。

page.tsx 是一个特殊的 Next.js 文件，它导出一个 React 组件，并且是路由可访问所必需的。在您的应用程序中，您已经有一个页面文件：/app/page.tsx - 这是与路由 / 关联的主页。

要创建嵌套路由，您可以将文件夹相互嵌套并在其中添加 page.tsx 文件。例如

Diagram showing how adding a folder called dashboard creates a new route '/dashboard'

/app/dashboard/page.tsx 与 /dashboard 路径关联。让我们创建页面以了解它是如何工作的！

创建仪表板页面

在 /app 中创建一个名为 dashboard 的新文件夹。然后，在 dashboard 文件夹中创建一个新的 page.tsx 文件，内容如下

/app/dashboard/page.tsx

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

现在，确保开发服务器正在运行并访问 https://127.0.0.1:3000/dashboard。您应该看到“Dashboard Page”文本。

这就是您在 Next.js 中创建不同页面的方式：使用文件夹创建一个新的路由段，并在其中添加一个 page 文件。

通过为 page 文件使用特殊名称，Next.js 允许您将 UI 组件、测试文件和其他相关代码与您的路由并置。只有 page 文件中的内容可以公开访问。例如，/ui 和 /lib 文件夹与您的路由一起并置在 /app 文件夹中。

练习：创建仪表板页面

让我们练习创建更多路由。在您的仪表板中，创建另外两个页面

客户页面：该页面应可通过 https://127.0.0.1:3000/dashboard/customers 访问。目前，它应该返回一个 <p>客户页面</p> 元素。
发票页面：发票页面应可通过 https://127.0.0.1:3000/dashboard/invoices 访问。目前，也返回一个 <p>发票页面</p> 元素。

花一些时间来解决这个练习，当您准备好后，展开下面的切换以查看解决方案

创建仪表板布局

仪表板具有某种在多个页面之间共享的导航。在 Next.js 中，您可以使用特殊的 layout.tsx 文件来创建在多个页面之间共享的 UI。让我们为仪表板页面创建一个布局！

在 /dashboard 文件夹中，添加一个名为 layout.tsx 的新文件并粘贴以下代码

/app/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>
  );
}

此代码中发生了一些事情，让我们分解一下

首先，您正在将 <SideNav /> 组件导入到您的布局中。您导入到此文件中的任何组件都将成为布局的一部分。

<Layout /> 组件接收一个 children prop。此子组件可以是页面或另一个布局。在您的情况下，/dashboard 中的页面将自动嵌套在 <Layout /> 中，如下所示

Folder structure with dashboard layout nesting the dashboard pages as children

通过保存更改并检查您的 localhost，检查一切是否正常工作。您应该看到以下内容

Dashboard page with a sidenav and a main content area

在 Next.js 中使用布局的一个好处是，在导航时，只有页面组件会更新，而布局不会重新渲染。这称为部分渲染，它在页面之间转换时保留布局中的客户端 React 状态。

Folder structure showing the dashboard layout nesting the dashboard pages, but only the pages UI swap on navigation

根布局

在第 3 章中，您将 Inter 字体导入到另一个布局中：/app/layout.tsx。作为提醒

/app/layout.tsx

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>
  );
}

这称为根布局，并且在每个 Next.js 应用程序中都是必需的。您添加到根布局的任何 UI 都将在应用程序中的所有页面之间共享。您可以使用根布局来修改您的 <html> 和 <body> 标签，并添加元数据（您将在后面的章节中了解有关元数据的更多信息）。

由于您刚刚创建的新布局 (/app/dashboard/layout.tsx) 对于仪表板页面是唯一的，因此您无需在上面的根布局中添加任何 UI。