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

我想创建以@符号开头的路由我应该如何构造

页面

文件夹？ 首先，我尝试创建一个名为

@

的文件夹，但是它会创建一个以

@

进行的路由，比如

www.example.com/@/something

。我甚至尝试了文件夹的

[@topic]

和

@[topic]

名称，但效果并不理想

我想有这样的路线：

www.example.com/@computer

www.example.com/@music

www.example.com/@programming

我如何处理这个问题

---

我的

Next.js

版本是

9.2.1

您只需将

更改为
链接的
组件的
道具，在需要的地方添加
@
符号即可

例如，如果您保持Next.js提供的路由/结构，请将
pages/post/[id]/
下的
index.js
更改为以下内容：

从“下一个/路由器”导入{useRouter}
从“下一个/链接”导入链接
从“../../../components/Header”导入标题
const Post=（）=>{
const router=useRouter（）
const{id}=router.query
返回(
帖子：{id}


第一条评论


)
}
导出默认帖子

将为您提供如下URL:
http://localhost:3000/post/@第一条/第一条评论

我希望这能帮助您找到解决方案。
正如@Nico所提到的，我们可以通过
Next.js
repo中的
custom server
示例来探讨解决方案

页面的结构如下：
Page->[topic]

我们需要在
server.js
内部检查以
@
符号开头的
URL
的任何传入请求，为此，我们将获得
正则表达式
内部
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]
组件，就像处理其他路由一样

客户端的内部组件
就这么简单：

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



您可以通过不同的方式获取
topicString
，比如在
getInitialProps
中使用
query
，如果您不想拥有自定义服务器，请尝试使用一些正则表达式。Next.js在引擎盖下使用

异步重写（）{
返回[
{
资料来源：'/:userId（@[a-zA-Z0-9]+）/:id*，
目标：“/user/：userId/：id*”，
}
]
}

你还得洒水



正如其他海报所提到的。
谢谢，但是如果用户从浏览器直接链接进入www.example.com/@计算机，那么我应该如何处理Next.js中的路由？如果您在
页面
文件夹下有一个名为
[part].js的文件，上述内容也不应该是问题。在你的
[part].js的
getInitialProps
上记录
query
，js
将返回
{part:'@computer'}
如果你在这方面有困难，试着在上面的问题上粘贴一部分代码，这样我可以进一步帮助你。实际上，我正在寻找的是一些通用的“页面”方式将匹配URL以“@”开头的结构查看自定义服务器