likes
comments
collection
share

Next.js14从入门到实战009：NextJS基础篇之创建布局与页面

作者站长头像
站长
· 阅读数 4

到目前为止，你的应用程序只有一个主页。让我们来学习如何通过布局和页面创建更多内容。

在本章主要学习

  • 使用文件系统路由创建 dashboard 路由。
  • 了解文件夹和文件在创建新航段时的作用。
  • 创建可在多个页面之间共享的嵌套布局。
  • 了解什么是主机托管、部分渲染和根布局。

嵌套路由

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

Next.js14从入门到实战009：NextJS基础篇之创建布局与页面

你可以使用 layout.tsx 和 page.tsx 文件为每个路由创建单独的用户界面。.

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

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

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

创建页面

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

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

现在，请确保开发服务器正在运行，并访问 http://localhost:3000/dashboard。您应该会看到 "Dashboard Page "文本。

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

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

练习下，创建一个页面

让我们练习下，创建两个页面

  1. 客户页面：该页面应可通过 http://localhost:3000/dashboard/customers 访问。它应返回一个 <p>Customers Page</p> 元素。
  2. 发票页面：发票页面应可在 http://localhost:3000/dashboard/invoices 上访问。还需返回 <p>Invoices Page</p> 元素。

如果你做完了，请看下答案

Next.js14从入门到实战009：NextJS基础篇之创建布局与页面

// /app/dashboard/customers/page.tsx
export default function Page() {
  return <p>Customers Page</p>;
}

// /app/dashboard/invoices/page.tsx
export default function Page() {
  return <p>Invoices Page</p>;
}

创建布局

在 Next.js 中，您可以使用一个特殊的 layout.tsx 文件来创建多个页面共享的用户界面。让我们为页面创建一个布局！

在 /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 /> 中，就像这样：

Next.js14从入门到实战009：NextJS基础篇之创建布局与页面

保存后，你看下页面是否如下：

Next.js14从入门到实战009：NextJS基础篇之创建布局与页面

在 Next.js 中使用布局的一个好处是，在导航时，只有页面组件会更新，而布局不会重新渲染。这就是所谓的部分呈现：

Next.js14从入门到实战009：NextJS基础篇之创建布局与页面

根布局

在之前的教程中，您将 Inter 字体导入了另一个布局： /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>
  );
}

这被称为根布局，是必需的。任何添加到根布局的用户界面都将在应用程序的所有页面中共享。您可以使用根布局来修改 <html> 和 <body> 标记，并添加元数据（有关元数据的更多信息，后面的章节会提到）。

由于您刚刚创建的新布局（ /app/dashboard/layout.tsx ）是dashboard页面所独有的，因此您无需在上面的根布局中添加任何用户界面。

转载自:https://juejin.cn/post/7359876671137398836
评论
请登录