Next.js 中何时使用 getStaticPaths？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 动态路由页面

在 Next.js 中，动态路由允许你根据 URL 参数动态生成页面。例如，假设你有一个博客系统，每个博客文章都有一个唯一的 ID，你可以创建一个动态路由页面 pages/posts/[id].js。为了在构建时生成所有博客文章的静态页面，你需要使用 getStaticPaths 来指定所有可能的 id 值。

// www.javascriptcn.com code example
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

2. 静态站点生成（SSG）

Next.js 支持静态站点生成（SSG），这意味着你可以在构建时生成静态 HTML 文件。getStaticPaths 用于指定哪些路径应该在构建时生成。例如，如果你有一个电商网站，并且希望在构建时生成所有产品页面的静态 HTML 文件，你可以使用 getStaticPaths 来指定所有产品的路径。

// www.javascriptcn.com code example
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  const paths = products.map((product) => ({
    params: { id: product.id.toString() },
  }));

  return { paths, fallback: false };
}

3. 数据驱动的页面

当你需要从外部数据源获取数据，并根据这些数据生成页面时，getStaticPaths 是必不可少的。例如，如果你有一个新闻网站，并且希望从 CMS 获取所有新闻文章的 ID，然后根据这些 ID 生成静态页面，你可以使用 getStaticPaths 来获取所有新闻文章的 ID，并在构建时生成相应的页面。

// www.javascriptcn.com code example
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/news');
  const news = await res.json();

  const paths = news.map((article) => ({
    params: { id: article.id.toString() },
  }));

  return { paths, fallback: false };
}

4. `fallback` 选项

getStaticPaths 返回的对象中有一个 fallback 选项，它决定了如何处理未在构建时生成的路径。如果 fallback 设置为 false，则任何未在构建时生成的路径都会返回 404 页面。如果 fallback 设置为 true 或 'blocking'，则 Next.js 会在请求时生成这些页面。

// www.javascriptcn.com code example
export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
    ],
    fallback: true, // or 'blocking'
  };
}

5. 与 `getStaticProps` 配合使用

getStaticPaths 通常与 getStaticProps 配合使用。getStaticProps 用于在构建时获取页面所需的数据，并将其作为 props 传递给页面组件。

// www.javascriptcn.com code example
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

通过结合使用 getStaticPaths 和 getStaticProps，你可以在构建时生成静态页面，并在页面加载时提供所需的数据。

Next.js 中何时使用 getStaticPaths？

推荐答案