原始文档位于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来解决这个问题，让我们看看如何使用它？设置首先，我们需要下载示例代码：gitclonehttps://github.com/arunoda/learnnextjs-demo.gitcdlearnnextjs-demogitcheckoutclean-urls然后通过以下命令运行我们的示例应用程序：npminstallnpmrundev最后通过http://localhost:3000访问web应用。创建自定义服务器我们使用Express创建自定义服务器。很简单：首先在应用程序中添加Express依赖：npminstall--saveexpress然后创建一个server.js文件，添加如下内容：constexpress=require('express')constnext=require('next')constdev=process.env.NODE_ENV!=='production'constapp=next({dev})consthandle=app.getRequestHandler()app.prepare().then(()=>{constserver=表达s()server.get('*',(req,res)=>{returnhandle(req,res)})server.listen(3000,(err)=>{if(err)throwerrconsole.log('>Readyonhttp://localhost:3000')})}).catch((ex)=>{console.error(ex.stack)process.exit(1)})现在，将NPM开发脚本更新为:{"scripts":{"dev":"nodeserver.js"}}然后，运行npmrundev，你看到了什么？创建自定义路由现在您所看到的，Next.js可以与ExpressWork一起工作。现在我们要添加一个自定义路由来匹配博客的URL。使用新路由，server.js将如下所示：{dev})consthandle=app.getRequestHandler()app.prepare().then(()=>{constserver=express()server.get('/p/:id',(req,res)=>{constactualPage='/post'constqueryParams={title:req.params.id}app.render(req,res,actualPage,queryParams)})server.get('*',(req,res)=>{returnhandle(req,res)})server.listen(3000,(err)=>{if(err)抛出错误console.log('>Readyonhttp://localhost:3000')})}).catch((ex)=>{console.error(ex.stack)process.exit(1)})注意代码块:server.get('/p/:id',(req,res)=>{constactualPage='/post'constqueryParams={title:req.params.id}app.render(req,res,actualPage,queryParams)})我们只是将自定义路由映射到我们现有的博客页面帖子。同时我们也映射了查询字符串。现在重启应用，访问如下地址：http://localhost:3000/p/hello-nextjs现在不会显示404页面了，因为我们通过自定义路由，将通过浏览器访问的地址映射到了实际页面，但是现在还有一个小问题，你能看出来吗？URL信息我们的/post页面通过查询字符串参数title接收标题。在客户端路由中，我们可以通过Link的as属性设置正确的值。
