getStaticPaths

如果页面具有动态路由并使用getStaticProps，则需要定义一个要静态生成的路径列表。

当您从使用动态路由的页面导出名为getStaticPaths（静态站点生成）的函数时，Next.js 将静态预渲染getStaticPaths指定的全部路径。

pages/repo/[name].tsx

import type {
  InferGetStaticPropsType,
  GetStaticProps,
  GetStaticPaths,
} from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getStaticPaths = (async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // See the "paths" section below
    ],
    fallback: true, // false or "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 API 参考涵盖了可与getStaticPaths一起使用的所有参数和属性。

何时应该使用 getStaticPaths？

如果您正在静态预渲染使用动态路由的页面，则应使用getStaticPaths，并且

数据来自无头 CMS
数据来自数据库
数据来自文件系统
数据可以公开缓存（非用户特定）
页面必须预渲染（用于 SEO）并且速度非常快——getStaticProps生成HTML和JSON文件，这两个文件都可以被 CDN 缓存以提高性能

getStaticPaths 何时运行

getStaticPaths仅在生产环境中的构建期间运行，它不会在运行时被调用。您可以验证getStaticPaths内部编写的代码是否已从客户端捆绑包中删除使用此工具。

getStaticProps 相对于 getStaticPaths 如何运行

getStaticProps在构建期间为next build期间返回的任何paths运行
当使用fallback: true时，getStaticProps在后台运行
当使用fallback: blocking时，getStaticProps在初始渲染之前被调用

在哪里可以使用 getStaticPaths

getStaticPaths**必须**与getStaticProps一起使用
您**不能**将getStaticPaths与getServerSideProps一起使用
您可以从也使用getStaticProps的动态路由导出getStaticPaths
您**不能**从非页面文件（例如您的components文件夹）导出getStaticPaths
您必须将getStaticPaths导出为独立函数，而不是页面组件的属性

在开发环境中每次请求都运行

在开发环境（next dev）中，getStaticPaths将在每次请求时被调用。

按需生成路径

getStaticPaths 允许您控制在构建期间生成哪些页面，而不是使用 fallback 按需生成。在构建期间生成更多页面会导致构建速度变慢。

您可以通过为 paths 返回空数组来推迟所有页面的按需生成。这在将您的 Next.js 应用程序部署到多个环境时尤其有用。例如，您可以通过按需生成所有页面来加快预览的构建速度（但不能用于生产构建）。这对于拥有数百/数千个静态页面的网站很有帮助。

pages/posts/[id].js

export async function getStaticPaths() {
  // When this is true (in preview environments) don't
  // prerender any static pages
  // (faster builds, but slower initial page load)
  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    return {
      paths: [],
      fallback: 'blocking',
    }
  }
 
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // Get the paths we want to prerender based on posts
  // In production environments, prerender all pages
  // (slower builds, but faster initial page load)
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
 
  // { fallback: false } means other routes should 404
  return { paths, fallback: false }
}