getStaticPaths

当从使用动态路由 (Dynamic Routes) 的页面中导出一个名为 getStaticPaths 的函数时，Next.js 会静态预渲染 getStaticPaths 指定的所有路径。

import type {
  InferGetStaticPropsType,
  GetStaticProps,
  GetStaticPaths,
} from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getStaticPaths = (async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // 参见下方的 "paths" 部分
    ],
    fallback: true, // false 或 "blocking"
  }
}) satisfies GetStaticPaths

export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetStaticProps<{
  repo: Repo
}>

export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count
}

getStaticPaths 返回值

getStaticPaths 函数应返回一个包含以下 必需 属性的对象：

paths

paths 键决定了哪些路径会被预渲染。例如，假设你有一个使用动态路由 (Dynamic Routes) 的页面 pages/posts/[id].js。如果你从该页面导出 getStaticPaths 并为 paths 返回以下内容：

return {
  paths: [
    { params: { id: '1' }},
    {
      params: { id: '2' },
      // 如果配置了 i18n，也可以返回路径的语言环境
      locale: "en",
    },
  ],
  fallback: ...
}

那么，Next.js 将在 next build 期间使用 pages/posts/[id].js 中的页面组件静态生成 /posts/1 和 /posts/2。

每个 params 对象的值必须与页面名称中使用的参数匹配：

• 如果页面名称是 pages/posts/[postId]/[commentId]，则 params 应包含 postId 和 commentId。
• 如果页面名称使用全捕获路由 (catch-all routes) 如 pages/[...slug]，则 params 应包含 slug（这是一个数组）。如果该数组是 ['hello', 'world']，那么 Next.js 将在 /hello/world 处静态生成页面。
• 如果页面使用可选全捕获路由 (optional catch-all route)，可以使用 null、[]、undefined 或 false 来渲染根路径。例如，如果你为 pages/[[...slug]] 提供 slug: false，Next.js 将静态生成页面 /。

params 字符串是 区分大小写 的，理想情况下应进行规范化以确保路径正确生成。例如，如果为参数返回 WoRLD，则仅当访问的实际路径是 WoRLD 时才会匹配，而不是 world 或 World。

除了 params 对象外，当配置了 i18n 时，还可以返回一个 locale 字段，用于配置生成路径的语言环境。

fallback: false

如果 fallback 为 false，则任何未由 getStaticPaths 返回的路径将导致 404 页面。

当运行 next build 时，Next.js 会检查 getStaticPaths 是否返回了 fallback: false，然后仅构建 getStaticPaths 返回的路径。如果你需要创建的路径数量较少，或者新页面数据不经常添加，此选项很有用。如果你发现需要添加更多路径，并且你设置了 fallback: false，则需要再次运行 next build 以生成新路径。

以下示例预渲染了一个名为 pages/posts/[id].js 的每篇博客文章页面。博客文章列表将从 CMS 获取并由 getStaticPaths 返回。然后，对于每个页面，使用 getStaticProps 从 CMS 获取文章数据。

function Post({ post }) {
  // 渲染文章...
}

// 此函数在构建时调用
export async function getStaticPaths() {
  // 调用外部 API 端点获取文章
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 根据文章获取我们想要预渲染的路径
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // 我们将在构建时仅预渲染这些路径。
  // { fallback: false } 表示其他路由应返回 404。
  return { paths, fallback: false }
}

// 此函数也在构建时调用
export async function getStaticProps({ params }) {
  // params 包含文章 `id`。
  // 如果路由是 /posts/1，则 params.id 是 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // 通过 props 将文章数据传递给页面
  return { props: { post } }
}

export default Post

fallback: true

如果 fallback 为 true，则 getStaticProps 的行为会发生以下变化：

• 由 getStaticPaths 返回的路径将在构建时由 getStaticProps 渲染为 HTML。
• 未在构建时生成的路径 不会 导致 404 页面。相反，Next.js 将在首次请求此类路径时提供一个“回退”版本的页面。Google 等网络爬虫不会被提供回退页面，而是会像 fallback: 'blocking' 一样处理路径。
• 当通过 next/link 或 next/router（客户端）导航到 fallback: true 的页面时，Next.js 将 不会 提供回退页面，而是会像 fallback: 'blocking' 一样处理页面。
• 在后台，Next.js 将静态生成请求路径的 HTML 和 JSON。这包括运行 getStaticProps。
• 完成后，浏览器会收到生成路径的 JSON。这将用于自动渲染具有所需 props 的页面。从用户的角度来看，页面将从回退页面切换到完整页面。
• 同时，Next.js 将此路径添加到预渲染页面列表中。对同一路径的后续请求将像其他在构建时预渲染的页面一样提供生成的页面。

须知：使用 output: 'export' 时不支持 fallback: true。

何时使用 fallback: true？

fallback: true 适用于具有大量依赖数据的静态页面（例如大型电子商务网站）。如果你想预渲染所有产品页面，构建将花费很长时间。

相反，你可以静态生成一小部分页面，并对其余页面使用 fallback: true。当有人请求尚未生成的页面时，用户将看到一个带有加载指示器或骨架组件的页面。

不久之后，getStaticProps 完成，页面将使用请求的数据渲染。从此时起，任何请求同一页面的人都将获得静态预渲染的页面。

这确保了用户始终拥有快速的体验，同时保持了快速构建和静态生成的优势。

fallback: true 不会 更新 生成的页面，如需更新生成的页面，请参阅增量静态再生 (Incremental Static Regeneration)。

fallback: 'blocking'

如果 fallback 为 'blocking'，则未由 getStaticPaths 返回的新路径将等待 HTML 生成（因此称为 阻塞），然后缓存以供将来请求使用，因此每个路径仅发生一次。

getStaticProps 的行为如下：

• 由 getStaticPaths 返回的路径将在构建时由 getStaticProps 渲染为 HTML。
• 未在构建时生成的路径 不会 导致 404 页面。相反，Next.js 将在首次请求时 SSR 并返回生成的 HTML。
• 完成后，浏览器会收到生成路径的 HTML。从用户的角度来看，它将从“浏览器正在请求页面”过渡到“完整页面已加载”。没有加载/回退状态的闪烁。
• 同时，Next.js 将此路径添加到预渲染页面列表中。对同一路径的后续请求将像其他在构建时预渲染的页面一样提供生成的页面。

默认情况下，fallback: 'blocking' 不会 更新 生成的页面。要更新生成的页面，请结合使用增量静态再生 (Incremental Static Regeneration) 和 fallback: 'blocking'。

须知：使用 output: 'export' 时不支持 fallback: 'blocking'。

回退页面

在页面的“回退”版本中：

• 页面的 props 将为空。
• 使用路由器 (router)，你可以检测是否正在渲染回退页面，router.isFallback 将为 true。

以下示例展示了如何使用 isFallback：

import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()

  // 如果页面尚未生成，这将显示
  // 直到 getStaticProps() 运行完成
  if (router.isFallback) {
    return <div>加载中...</div>
  }

  // 渲染文章...
}

// 此函数在构建时调用
export async function getStaticPaths() {
  return {
    // 仅 /posts/1 和 /posts/2 在构建时生成
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    // 启用静态生成其他页面
    // 例如：/posts/3
    fallback: true,
  }
}

// 此函数也在构建时调用
export async function getStaticProps({ params }) {
  // params 包含文章 `id`。
  // 如果路由是 /posts/1，则 params.id 是 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // 通过 props 将文章数据传递给页面
  return {
    props: { post },
    // 如果请求到来，最多每秒重新生成文章一次
    revalidate: 1,
  }
}

export default Post

版本历史