Sponsor
ntab.devntab.dev 提升效率的新标签页组件
点击查看
Menu

页面和布局

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

当文件被添加到 pages 目录时,它会自动可用作路由。

在 Next.js 中,页面是从 pages 目录中的 .js.jsx.ts.tsx 文件导出的 React 组件。每个页面都根据其文件名与一个路由相关联。

示例:如果你创建 pages/about.js 并导出如下 React 组件,它将可以通过 /about 访问。

export default function About() {
  return <div>关于</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/1posts/2 等访问。

要了解更多关于动态路由的信息,请查看动态路由文档

布局模式

React 模型允许我们将页面解构为一系列组件。这些组件中的许多经常在页面之间重复使用。例如,你可能在每个页面上都有相同的导航栏和页脚。

components/layout.js
import Navbar from './navbar'
import Footer from './footer'
 
export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

示例

使用自定义应用的单一共享布局

如果你的整个应用只有一个布局,你可以创建一个自定义应用并用布局包裹你的应用。由于 <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 可以理解哪些元素发生了变化以保留状态。

值得注意的是:这个过程称为协调,这是 React 理解哪些元素发生变化的方式。

使用 TypeScript

使用 TypeScript 时,你必须首先为包含 getLayout 函数的页面创建一个新类型。然后,你必须为 AppProps 创建一个新类型,该类型重写 Component 属性以使用先前创建的类型。

pages/index.tsx
TypeScript
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>你好世界</p>
}
 
Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}
 
export default Page
pages/_app.tsx
TypeScript
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
 
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}
 
type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}
 
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // 使用页面级定义的布局(如果可用)
  const getLayout = Component.getLayout ?? ((page) => page)
 
  return getLayout(<Component {...pageProps} />)
}

数据获取

在你的布局中,你可以使用 useEffect 或像 SWR 这样的库在客户端获取数据。因为这个文件不是页面,所以目前无法使用 getStaticPropsgetServerSideProps

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>加载失败</div>
  if (!data) return <div>加载中...</div>
 
  return (
    <>
      <Navbar links={data.links} />
      <main>{children}</main>
      <Footer />
    </>
  )
}