Next.js 可选捕获所有路由

在 Next.js 中，路由系统是自带的，并且可以非常方便地进行配置。其中一个非常有用的功能是可选捕获所有路由（Optional catch-all routes）。

可选捕获所有路由允许你定义一个匹配所有 URL 的页面。这对于构建动态路由的情况非常有用，因为你不需要为每个可能的 URL 都定义一个单独的页面。

如何使用可选捕获所有路由

要定义一个可选捕获所有路由，需要在页面文件名中使用大括号（{}）。

例如，如果你想要捕获 /blog 中所有的文章，可以将页面命名为 pages/blog/[...slug].js。注意，你需要包含省略号（...）来指示可选捕获所有路由。

然后，你可以在页面中使用 getStaticPaths 或 getServerSideProps 函数来获取所有匹配的 URL。

// pages/blog/[...slug].js

import { useRouter } from 'next/router'

function BlogPost() {
  const router = useRouter()
  const { slug } = router.query

  // 根据 slug 展示博客文章
}

export async function getStaticPaths() {
  // 获取所有匹配的 URL
  const paths = getAllBlogPostPaths()

  return {
    paths,
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const blogPost = getBlogPost(params.slug)

  return {
    props: {
      ...blogPost,
    },
  }
}

在上面的示例中，我们使用了 useRouter 来获取路由参数。然后，我们可以根据 slug 展示相应的博客文章。

我们还定义了 getStaticPaths 和 getStaticProps 函数，以获取所有匹配的 URL 和相应的博客文章。注意，我们将 fallback 设置为 false，这表示我们只显示已构建的路由，而不显示任何尚未构建的路由。

总结

可选捕获所有路由是 Next.js 中非常实用的功能，它允许你捕获所有 URL 并根据需要进行处理。在本文中，我们介绍了如何使用可选捕获所有路由，并且提供了一个示例来演示如何从中受益。