頁面與佈局

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