如何创建布局和页面

Next.js 使用基于文件系统的路由，这意味着你可以通过文件夹和文件来定义路由。本页将指导你如何创建布局和页面，并在它们之间建立链接。

创建页面

页面是在特定路由上渲染的用户界面。要创建一个页面，在 app 目录中添加一个 page 文件，并默认导出一个 React 组件。例如，要创建一个首页 (/)：

export default function Page() {
  return <h1>Hello Next.js!</h1>
}

创建布局

布局是共享于多个页面之间的用户界面。在导航时，布局会保留状态、保持交互性且不会重新渲染。

你可以通过在 layout 文件中默认导出一个 React 组件来定义布局。该组件应接受一个 children 属性，该属性可以是一个页面或另一个嵌套布局。

例如，要创建一个接受首页作为子元素的布局，在 app 目录中添加一个 layout 文件：

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* 布局 UI */}
        {/* 将 children 放置在你希望渲染页面或嵌套布局的位置 */}
        <main>{children}</main>
      </body>
    </html>
  )
}

上面的布局被称为根布局，因为它定义在 app 目录的根目录下。根布局是必需的，并且必须包含 html 和 body 标签。

创建嵌套路由

嵌套路由是由多个 URL 段组成的路由。例如，/blog/[slug] 路由由三个段组成：

/ (根段)
blog (段)
[slug] (叶段)

在 Next.js 中：

文件夹用于定义映射到 URL 段的路由段。
文件（如 page 和 layout）用于创建为段显示的用户界面。

要创建嵌套路由，你可以将文件夹相互嵌套。例如，要添加 /blog 路由，在 app 目录中创建一个名为 blog 的文件夹。然后，为了使 /blog 可公开访问，添加一个 page.tsx 文件：

// 虚拟导入
import { getPosts } from '@/lib/posts'
import { Post } from '@/ui/post'

export default async function Page() {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
    </ul>
  )
}

你可以继续嵌套文件夹以创建嵌套路由。例如，要为特定博客文章创建路由，在 blog 文件夹内创建一个新的 [slug] 文件夹并添加一个 page 文件：

文件层次结构显示 blog 文件夹内嵌套的 slug 文件夹和 page.js 文件

function generateStaticParams() {}

export default function Page() {
  return <h1>Hello, Blog Post Page!</h1>
}

将文件夹名称用方括号包裹（例如 [slug]）会创建一个动态路由段，用于从数据生成多个页面。例如博客文章、产品页面等。

嵌套布局

默认情况下，文件夹层次结构中的布局也是嵌套的，这意味着它们通过 children 属性包裹子布局。你可以通过在特定路由段（文件夹）内添加 layout 来嵌套布局。

例如，要为 /blog 路由创建一个布局，在 blog 文件夹内添加一个新的 layout 文件。

export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

如果将上述两个布局结合起来，根布局 (app/layout.js) 将包裹博客布局 (app/blog/layout.js)，而博客布局将包裹博客页面 (app/blog/page.js) 和博客文章页面 (app/blog/[slug]/page.js)。

创建动态段

动态段允许你从数据生成路由。例如，与其手动为每篇博客文章创建路由，不如创建一个动态段来基于博客文章数据生成路由。

要创建动态段，将段（文件夹）名称用方括号包裹：[segmentName]。例如，在 app/blog/[slug]/page.tsx 路由中，[slug] 就是动态段。

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

了解更多关于动态段的信息。

在页面之间链接

你可以使用 <Link> 组件在路由之间导航。<Link> 是 Next.js 内置的组件，它扩展了 HTML <a> 标签，提供了预取和客户端导航功能。

例如，要生成博客文章列表，从 next/link 导入 <Link> 并向组件传递 href 属性：

import Link from 'next/link'

export default async function Post({ post }) {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

<Link> 是在 Next.js 应用程序中导航路由的主要和推荐方式。不过，你也可以使用 useRouter 钩子进行更高级的导航。

创建页面

创建布局

创建嵌套路由

嵌套布局

创建动态段

在页面之间链接

layout.js

page.js

Link

动态段

On this page