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

Question

我想创建以@符号开头的路由，我应该如何构建pages文件夹？首先，我尝试创建一个@名为 的文件夹，但它会创建以@like开头的路由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

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

页面的结构将是这样的：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通过不同的方式获得，例如使用queryinsidegetInitialProps