Learnnext-6 :Server Side Support for Clean URLs

因为是服务端找不到hello-nextjs那个页面，匹配路由失败，所以我们就要手动去将路由匹配到正确的页面上去。
首先我们去install一个nodejs的服务端框架：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)
})

然后去更新你的package.json的script属性：

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

现在你可以去重启一下你的应用。

但是，发现现在还是没有解决刷新页面404的问题。
是因为我们现在还没有对路由做任何的匹配操作，只是让它去渲染对应的page。
现在，我们在server.js增加代码，在server.get('*'...)前面加：

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

这次发现页面修复了，不会出现404了。

这就是express做的事情，当匹配到以/p/开头的路由时，就知道是要去渲染post页面，所以这里app去render的参数当中写的pathname就是'/post'。

这时我们发现刷新页面显示的内容不对，是因为页面传的参数和以前的不一样，因为我们在使用url掩码的时候，缺失了title，所以只能用id来代替，因此你只需要自己将组件里显示的内容改成prop.id就可以。

当然，这里我们也可以使用其他的nodejs服务端框架来完成服务端的操作，比如：koa。