next.js - 如何处理 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。