如何处理 next.js 路由中的尾部斜杠？

Question

我正在尝试设置 next.js 应用程序，但在处理带有斜杠的路由时遇到问题。因此，例如，如果我有这样的页面结构：

pages
 - index.js
 - blog
   - index.js
   - [slug].js

然后去/给我基础index.js，去/blog给我blog/index.js，去/blog/my-post给我blog/[slug].js- 到目前为止一切都很好。

但是要给/blog/我一个 404 错误，如果不完全替换 next.js 路由器，似乎根本没有办法处理这个问题——我什/blog/至无法重定向到/blog. 有什么办法可以解决这个问题，还是我需要一个自定义路由器？有没有办法以一种让我处理这些的方式扩展 next.js 路由器，而不用完全替换它？

Answer 1

更新：如果您使用的是next export比您可以通过添加exportTrailingSlash到您的next.config.js

在撰写本文时，如果不定义您自己的自定义服务器，似乎无法解决此问题。

上一个答案：

您必须创建一个blog.js如下所示的新文件：

使用以下 server.js

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

const PORT = process.env.PORT || 3000;

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

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

    server.get('/blog', (req, res) => {
      const actualPage = '/blog'
     // const queryParams = { title: req.params.id }
      app.render(req, res, '/blog', {})
    })
    server.get('/blog/:id', (req, res) => {
      const actualPage = '/blog/[id]'
      const queryParams = { title: req.params.id }
      app.render(req, res, actualPage, queryParams)
    })

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

    server.listen(PORT, err => {
      if (err) throw err
      console.log(`> Ready on http://localhost:${PORT}`)
    })
  })
  .catch(ex => {
    console.error(ex.stack)
    process.exit(1)
  })

node server.js 应该启动您的服务器，您将拥有所需的映射。

注意，blog/index.js本例中不使用。

Answer 2

有一个选项Next.js 9.5和向上。

在 中next.config.js，添加trailingSlash配置：

module.exports = {
  trailingSlash: true,
}

资料来源：尾随斜线