Next.js 默认使用 file-system routing。比如定义了页面 pages/product/list.js，那么你可以通过 http://your-site.com/product/list 来访问它。但是如果你想用自定义的 http://your-site.com/product 来访问，应该怎么做呢？

这里需要改两个地方，一个是客户端，一个是服务端。

客户端需要修改任何指向这个页面的 <Link> 元素，用 href 表示文件系统路径，用 as 表示浏览器中的路径，比如：

<Link href="/product/list" as="/product">
  <a>List Page</a>
</Link>

这样你在页面上点击这个链接时，浏览器路径会变成 /product，页面也会正常渲染。但是当你此时刷新页面时，会报 404，加载不出来 /product 页面，因为 Next.js 它按逻辑去找 pages/product.js 找不到。此时你应该在服务端也写上映射规则。具体做法如下：

1. 参考 Next.js 文档，修改 package.json 及拷贝 server.js
2. 在 server.js 中写上：

   if (pathname === "/product") {
     app.render(req, res, "/product/list", query)
   } else {
     handle(req, res, parsedUrl)
   }