Next.js: Routing: Custom Routing

20th August 2020 at 2:19pm
Next.js: Routing

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)
    }