Javascript Nextjs-一级动态路由

我想在domain.com/：username上的应用程序中拥有用户配置文件。我该怎么做？在/pages中创建一个新文件夹将创建一个新的URL部分，如/user/：username，我不需要它。

只需将页面内的文件命名为

[username].js

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

• 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 */} </>
}

内页
您可以使用路由器获取路由的名称

// 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 */} </>
}

文件
顺便说一下，如果您还没有：