页面与布局

Pages Router 基于页面概念构建了一个基于文件系统的路由系统。

当文件被添加到 pages 目录时，它会自动成为可访问的路由。

在 Next.js 中，页面是指从 pages 目录中的 .js、.jsx、.ts 或 .tsx 文件导出的 React 组件。每个页面会根据其文件名关联到对应的路由。

示例：如果您创建 pages/about.js 并导出如下 React 组件，该页面将通过 /about 路径访问。

export default function About() {
  return <div>About</div>
}

索引路由

路由系统会自动将名为 index 的文件映射到目录的根路径。

pages/index.js → /
pages/blog/index.js → /blog

嵌套路由

路由系统支持嵌套文件结构。如果您创建了嵌套文件夹结构，文件仍会以相同方式自动路由。

pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

动态路由页面

Next.js 支持动态路由页面。例如，如果您创建名为 pages/posts/[id].js 的文件，则该页面可通过 posts/1、posts/2 等路径访问。

要了解更多关于动态路由的信息，请查阅动态路由文档。

布局模式

React 模型允许我们将页面解构为一系列组件。其中许多组件通常会在页面间复用。例如，您可能希望在每个页面上显示相同的导航栏和页脚。

components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

示例

使用自定义 App 实现单一共享布局

如果您的整个应用只需要一个布局，可以创建一个自定义 App 并用布局组件包裹您的应用。由于 <Layout /> 组件在页面切换时会被复用，其组件状态（如表单输入值）将得以保留。

pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

按页面定制布局

如果需要多种布局，可以在页面中添加 getLayout 属性，该属性返回布局的 React 组件。这允许您实现 按页面定义布局。由于我们返回的是函数，因此可以根据需要实现复杂的嵌套布局。

pages/index.js


import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'

export default function Page() {
  return (
    /** 您的内容 */
  )
}

Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

pages/_app.js

export default function MyApp({ Component, pageProps }) {
  // 优先使用页面级定义的布局，如果不存在则直接渲染页面
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

在页面间导航时，为了实现单页应用 (SPA) 体验，我们需要保持页面状态（输入值、滚动位置等）。

这种布局模式之所以能保持状态，是因为 React 组件树在页面切换时得以维持。通过组件树，React 可以识别哪些元素发生了变化从而保留状态。

须知：此过程称为协调 (reconciliation)，是 React 识别元素变化的机制。

TypeScript 实现

使用 TypeScript 时，首先需要为页面创建包含 getLayout 函数的新类型。然后，为 AppProps 创建覆盖 Component 属性的新类型。

import type { ReactElement } from 'react'
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
import type { NextPageWithLayout } from './_app'

const Page: NextPageWithLayout = () => {
  return <p>hello world</p>
}

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

export default Page

数据获取

在布局组件中，您可以使用 useEffect 或 SWR 等库在客户端获取数据。由于该文件不是页面，目前无法使用 getStaticProps 或 getServerSideProps。

components/layout.js

import useSWR from 'swr'
import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  const { data, error } = useSWR('/api/navigation', fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <>
      <Navbar links={data.links} />
      <main>{children}</main>
      <Footer />
    </>
  )
}

On this page