Next.js 面试题 目录

Next.js 中何时使用 getStaticPaths？

推荐答案

在 Next.js 中，getStaticPaths 用于在构建时生成静态页面的路径。它通常与 getStaticProps 一起使用，适用于以下场景：

  1. 动态路由页面：当你有一个动态路由页面（例如 pages/posts/[id].js），并且你希望在构建时预生成所有可能的页面路径时，使用 getStaticPaths。
  2. 静态站点生成（SSG）：当你希望生成静态 HTML 文件，并且这些文件的内容在构建时就已经确定时，使用 getStaticPaths。
  3. 数据驱动的页面：当你需要从外部数据源（如 CMS、数据库或 API）获取数据，并根据这些数据生成页面时，使用 getStaticPaths。

本题详细解读

1. 动态路由页面

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

-- -------------------- ---- -------
------ ----- -------- ---------------- -
  ----- --- - ----- ---------------------------------------
  ----- ----- - ----- -----------

  ----- ----- - ---------------- -- --
    ------- - --- ------------------ --
  ----

  ------ - ------ --------- ----- --
-

2. 静态站点生成（SSG）

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

-- -------------------- ---- -------
------ ----- -------- ---------------- -
  ----- --- - ----- ------------------------------------------
  ----- -------- - ----- -----------

  ----- ----- - ---------------------- -- --
    ------- - --- --------------------- --
  ----

  ------ - ------ --------- ----- --
-

3. 数据驱动的页面

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

-- -------------------- ---- -------
------ ----- -------- ---------------- -
  ----- --- - ----- --------------------------------------
  ----- ---- - ----- -----------

  ----- ----- - ------------------ -- --
    ------- - --- --------------------- --
  ----

  ------ - ------ --------- ----- --
-

4. fallback 选项

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

-- -------------------- ---- -------
------ ----- -------- ---------------- -
  ------ -
    ------ -
      - ------- - --- --- - --
      - ------- - --- --- - --
    --
    --------- ----- -- -- ----------
  --
-

5. 与 getStaticProps 配合使用

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

-- -------------------- ---- -------
------ ----- -------- ---------------- ------ -- -
  ----- --- - ----- ----------------------------------------------------
  ----- ---- - ----- -----------

  ------ -
    ------ -
      -----
    --
  --
-

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

上一篇： Next.js 中何时使用 getStaticProps？
下一篇： Next.js 中何时使用 getServerSideProps？
纠错
反馈