Nextjs - 一级动态路由

Question

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

Answer 1

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

Answer 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