在 Next.js 中使用 getStaticPaths

在 Next.js 中，通过使用 getStaticPaths 方法，我们可以在构建时生成有限数量的静态页面。在这篇文章中，我们将学习如何在 Next.js 中使用 getStaticPaths。

什么是 getStaticPaths？

getStaticPaths 方法用于生成动态路由的参数。它负责告诉 Next.js 在生成的静态页面中需要包括哪些路径参数。

getStaticPaths 方法应该返回一个对象，该对象包括一个数组 paths。path 数组包括了对于动态路由中所有可能的路径的参数配置。

如何在 Next.js 中使用 getStaticPaths？

要在 Next.js 中使用 getStaticPaths，我们需要在页面文件的顶部导入它。我们的页面文件需要导出一个 React 组件，该组件包含一个 getStaticPaths 方法。

例如，我们将在以下的代码块中创建一个动态路由：

// /pages/posts/[id].js

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <p>Post ID: {id}</p>
    </div>
  )
}

在这个页面中，我们使用 useRouter 钩子来获取此页面的 id 参数。现在，我们将通过 getStaticPaths 方法告诉 Next.js 在构建时需要生成包含哪些 id 可选值的静态页面。

// /pages/posts/[id].js

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <p>Post ID: {id}</p>
    </div>
  )
}

export async function getStaticPaths() {
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } },
  ]

  return { paths, fallback: false }
}

在这个示例中，我们已经精确地告诉 Next.js 需要构建哪些静态页面。我们使用了一个 paths 数组来指定路径参数的可能值。现在，Next.js 将会为我们生成以下三个静态页面：

• /posts/1
• /posts/2
• /posts/3

总结

在本教程中，我们学习了如何在 Next.js 中使用 getStaticPaths 方法。通过使用它，我们可以为动态路由指定哪些参数值需要在构建时生成静态页面。这在许多情况下都很有用，例如构建带有大量内容的博客或电子商务网站。