Nextjs - 一级动态路由答案

【问题标题】：Nextjs - first level dynamic routeNextjs - 一级动态路由
【发布时间】：2021-03-17 22:59:22
【问题描述】：

我想在 domain.com/:username 的应用中拥有用户个人资料。我该怎么做？在 /pages 中创建一个新文件夹将创建一个新的 URL 部分，例如 /user/:username，这是我不想要的。

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

只需将页面内的文件命名为[username].js

【讨论】：

【解决方案2】：

创建动态路由

您可以通过将文件名放在括号中来创建动态路由。例如：

pages/[id].js
pages/[slug].js
pages/posts/[slug].js
pages/[author]/[slug].js
pages/[author]/bio.js

注意动态路由可以在任何级别。它不仅需要位于 pages 文件夹的根目录，也不需要是 url 的最后一级。另请注意，您可以将动态路由命名为任何您想要的名称。您不仅限于使用[id] 或[slug]。

在你的情况下，使用pages/[username].js

访问路径名称

如果您在pages/posts/[slug].js 创建动态路由，https://example.com/posts/slug-of-the-post 的任何页面都将指向该页面。但是，您可能希望每个页面上有不同的内容（即，用户在 https://example.com/posts/slug-of-the-post，而不是 https://example.com/posts/slug-of-a-different-post。为此，您需要访问路由的内容。

页面内

您可以使用路由器来获取路由的名称。

// pages/posts/[slug].js

import { router } from 'next/router'

export default function PostPage() {
  const router = useRouter()
  
  const slug = router.query.slug // "slug" because that was the name of the file

  return <>{/* page contents */} </>
}

所以在页面https://example.com/posts/slug-of-the-post 上，变量slug 将是slug-of-the-post。

如果您使用[id].js，请改用router.query.id。

GetStaticProps/GetServerSideProps

使用服务器端函数，过程非常相似。

// pages/posts/[slug].js

// bottom of the file

export async function getServerSideProps(context) {
  const slug = context.params.slug

  return {
    props: {},
  }
}

文档

顺便说一句，如果您还没有，我还建议您查看文档：

https://nextjs.org/docs/routing/dynamic-routes

【讨论】：