学习 Next.js: 清洁URL的服务器支持

原始文档在 https://github.com/developerw... 如今搬过来.

学习 Next.js: 入门
学习 Next.js: 页面之间的导航
学习 Next.js: 使用共享组件
学习 Next.js: 建立动态内容
学习 Next.js: 使用路由掩码建立干净的URL
学习 Next.js: 干净URL的服务器支持
学习 Next.js: 获取数据
学习 Next.js: 部署

干净URL的服务器支持

在前面的课程中, 咱们学习了如何为咱们的应用程序建立干净的URL. 基本上, 咱们让URL像这样:

http://localhost:3000/p/my-blog-post

可是, 它如今只能用于客户端导航. 当咱们从新加载页面的时候, 它给了咱们一个404错误页面.

这是由于, 在pages目录中, 并不存在一个实际的p/my-blog-post模块文件.

咱们使用Next.js的自定义服务器API来解决这个问题, 让咱们看看如何使用它?

设置

首先, 咱们需下载示例代码:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout clean-urls

而后经过下面的命令运行咱们的示例程序:

npm install
npm run dev

最后经过 http://localhost:3000 访问Web应用程序.

建立自定义服务器

咱们使用 Express 来建立一个自定义服务器. 它很是简单:

首先, 添加 Express 依赖到应用程序:

npm install --save express

而后建立一个 server.js 文件, 并添加下面的内容:

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

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

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

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

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

如今, 更新NPM的开发脚本为:

{
  "scripts": {
    "dev": "node server.js"
  }
}

而后, 运行npm run dev, 你会看到什么?

建立自定义路由

如今你所看到的, Next.js 能够和 Express 一块儿协同工做. 如今咱们要添加一个自定义的路由来匹配博客的URL.

用新的路由, server.js 看起来就是这个样子:

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

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

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

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

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

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

注意一下代码块:

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

咱们简单的映射了一个自定义路由到咱们现有的博客页面 post. 同时咱们还映射了查询串.

如今重启应用程序, 访问下面的地址:

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

如今, 不会再显示 404 页面了, 由于, 经过自定义路由, 咱们把经过浏览器访问的地址映射到了实际的页面, 可是如今还有一个小问题, 你能看出来么?

URL信息

咱们的 /post 页面经过查询串参数 title 来接收标题. 在客户端路由中, 咱们能够经过 Link 的 as 属性设置正确的值.

<Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
  <a>{props.title}</a>
</Link>

可是在服务器路由中, 咱们得不到这个title, 由于咱们只有一个URL中博客的ID, 所以咱们使用这个ID做为服务器端查询串参数.

你能够经过以下的路由定义看到:

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

这就是问题. 可是在实际应用中, 这实际上不是一个问题, 由于, 一般咱们在服务器端和客户端都经过ID从数据服务器获取数据. 所以实际上, 咱们只须要一个ID.

最后

如今咱们经过 Next.js 自定义服务器API 实现了一个简单的应用程序. 以此为基础, 咱们添加了干净URL的服务器端支持. 就像这样, 你能够建立更多你想要的路由.

对于Web服务器, 不限于使用 Express 做为服务器, 你能够使用任何 Node.js Web框架. 对于 自定义服务器API的想信息文档, 参考 定义服务器API文档