创建我们的自定义路由

如您所见，应用程序将像以前一样工作，因为我们编写的定制服务器类似于“下一个”二进制命令。

现在我们要添加一个自定义路线来匹配我们的博客文章URL。

使用新路由，我们的server.js将如下所示：

  1. const express = require('express')
  2. const next = require('next')
  4. const dev = process.env.NODE_ENV !== 'production'
  5. const app = next({ dev })
  6. const handle = app.getRequestHandler()
  8. app.prepare()
  9. .then(() => {
  10.   const server = express()
  12.   server.get('/p/:id', (req, res) => {
  13.     const actualPage = '/post'
  14.     const queryParams = { title: req.params.id } 
  15.     app.render(req, res, actualPage, queryParams)
  16.   })
  18.   server.get('*', (req, res) => {
  19.     return handle(req, res)
  20.   })
  22.   server.listen(3000, (err) => {
  23.     if (err) throw err
  24.     console.log('> Ready on http://localhost:3000')
  25.   })
  26. })
  27. .catch((ex) => {
  28.   console.error(ex.stack)
  29.   process.exit(1)
  30. })

看看下面的代码：

  1. server.get('/p/:id', (req, res) => {
  2.     const actualPage = '/post'
  3.     const queryParams = { title: req.params.id } 
  4.     app.render(req, res, actualPage, queryParams)
  5. })

在这里，我们简单地将自定义路由映射到我们现有的页面“/post”。 我们也映射了查询参数。

就是这样了。

现在，重新启动您的应用程序并访问以下页面：

http://localhost:3000/p/hello-nextjs

现在你将看不到404页面，而是实际的页面。

但是还有一个小问题。 你可以发现吗？

  1. ✦No。 没有问题。
  2. ✓客户端渲染标题和服务器端渲染标题不同。
  3. ✦服务器端渲染页面将在控制台上发生错误。
  4. ✦客户端渲染的页面将在控制台上发生错误。