如何创建以 Next.js 中的特定字符开头的动态路由？

Question

我想创建以 @ 符号开头的路由我应该如何构建 pages 文件夹？首先，我尝试创建一个名称为 @ 的文件夹，但它会创建以 @ 开头的路由，例如 www.example.com/@/something。我什至尝试了文件夹的 [@topic] 和 @[topic] 名称，但它没有按预期工作。

我想要这样的路线： www.example.com/@computer www.example.com/@music www.example.com/@programming

我该如何解决这个问题？

我的 Next.js 版本是 9.2.1

Answer 1

你应该只更改 Link 组件的 as 属性，在你需要的地方添加 @ 符号。

例如，如果你让你routes/structure喜欢Next.js提供的the example for dynamic routing，将pages/post/[id]/下的index.js改成如下：

import { useRouter } from 'next/router'
import Link from 'next/link'
import Header from '../../../components/header'

const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return (
    <>
      <Header />
      <h1>Post: {id}</h1>
      <ul>
        <li>
          <Link 
            href="/post/[id]/[comment]" 
            as={`/post/@${id}/first-comment`}>
            <a>First comment</a>
          </Link>
        </li>
      </ul>
    </>
  )
}

export default Post

会给你一个像这样的URL：http://localhost:3000/post/@first/first-comment

希望这能帮助您找到自己的出路。

Answer 2

正如@Nico 提到的，我们可以从 Next.js 存储库中的 custom-server 示例中获得灵感来处理解决方案。

页面的结构将是这样的：page->[topic]

我们需要在 server.js 内部检查任何以 URL 以 @ 符号开头的传入请求，为此我们将在 regular expressions 内部获得帮助 express.js:

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    const server = express()

    // this will match all the URLs that start with @
    // e.g. @computer, @hello
    server.get('/@*', (req, res) => {
        return app.render(req, res, '/[topic]', req.query)
    })


    server.all('*', (req, res) => {
        return handle(req, res)
    })

    server.listen(port, err => {
        if (err) throw err
            console.log(`> Ready on http://localhost:${port}`)
    })
})

这只是将以 @ 开头的请求协调到 [topic] 组件，就像处理其他路由一样。

client-side 的内部组件就这么简单：

 <Link href="/[topic]" as=`@${topicString}`/>

您可以通过不同的方式获得 topicString，例如在 getInitialProps

中使用 query

Answer 3

如果您不想拥有自定义服务器，请在后台尝试 rewrites and some regex. Next.js uses path-to-regexp。

  async rewrites() {
    return [
      {
        source: '/:userId(@[a-zA-Z0-9]+)/:id*',
        destination: "/user/:userId/:id*",
      }
    ]
  }

你还是要洒

 <Link href="/user/[userId]" as=`@${userId}`/>

如其他发帖者所述。

如何创建以 Next.js 中的特定字符开头的动态路由？

How to create dynamic routes that start with a specific character in Next.js?

next.js