getStaticPaths

当从使用动态路由的页面导出名为 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 键决定将预渲染哪些路径。例如，假设你有一个使用动态路由的页面，名为 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。
• 如果页面使用捕获所有路由，如 pages/[...slug]，则 params 应包含 slug（它是一个数组）。如果此数组是 ['hello', 'world']，则 Next.js 将在 /hello/world 处静态生成页面。
• 如果页面使用可选的捕获所有路由，请使用 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 将在第一次请求此类路径时提供"fallback"版本的页面。网络爬虫（如 Google）不会提供 fallback，而是路径的行为将类似于 fallback: 'blocking'。
• 当通过 next/link 或 next/router（客户端）导航到带有 fallback: true 的页面时，Next.js 将不提供 fallback，而是页面的行为将类似于 fallback: 'blocking'。
• 在后台，Next.js 将静态生成请求的路径的 HTML 和 JSON。这包括运行 getStaticProps。
• 完成后，浏览器接收生成的路径的 JSON。这将用于自动使用所需的 props 渲染页面。从用户的角度来看，页面将从 fallback 页面切换到完整页面。
• 同时，Next.js 将此路径添加到预渲染页面列表中。对同一路径的后续请求将像在构建时预渲染的其他页面一样提供生成的页面。

值得注意的是：使用 output: 'export' 时不支持 fallback: true。

何时 fallback: true 有用？

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

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

不久之后，getStaticProps 完成，页面将使用请求的数据渲染。从现在开始，请求相同页面的每个人都将获得静态预渲染的页面。

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

fallback: true 不会更新生成的页面，要了解这一点，请查看增量静态重新生成。

fallback: 'blocking'

如果 fallback 为 'blocking'，getStaticPaths 未返回的新路径将等待生成 HTML，与 SSR 完全相同（因此称为_blocking_），然后为将来的请求缓存，因此每个路径只发生一次。

getStaticProps 将表现如下：

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

fallback: 'blocking' 默认情况下不会_更新_生成的页面。要更新生成的页面，请结合使用增量静态重新生成和 fallback: 'blocking'。

值得注意的是：当使用 output: 'export' 时，不支持 fallback: 'blocking'。

回退页面

在页面的"回退"版本中：

• 页面的 props 将为空。
• 使用路由器，你可以检测是否正在渲染回退，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

版本历史