Next.js 重写 - 访问原始请求参数答案

【问题标题】：Next.js rewrites - access original request parametersNext.js 重写 - 访问原始请求参数
【发布时间】：2020-11-30 18:37:16
【问题描述】：

我正在为 Next.js 应用程序构建一个导航系统，该应用程序具有类似的路线

http://localhost:3000/docs/section1/pageName
http://localhost:3000/docs/section2/pageName
等

在后台，这些路由将指向一个页面/docs/:slug，这可以通过重写来实现：

  async rewrites() {
    return [
      {
        source: '/docs/section1/:slug',
        destination: '/docs/:slug'
      },
      {
        source: '/docs/section2/:slug',
        destination: '/docs/:slug'
      }
    ];
  }

但我想将sectionN 作为上下文变量传递给目标路径。这样slug 页面就可以知道最初引用了哪个部分。目的是尽量减少底层页面的数量，但保持页面导航对用户或搜索机器人有意义。

我了解重写支持/api 可能会受到限制。检查getInitialProps 中的context - 原始工件不可用。有没有办法在 Next.js 中以不同的方式处理这个问题？

【问题讨论】：

为什么不将页面定义为 /docs/:section/:slug
谢谢@felixmosh 这听起来像是一个完全可行的解决方案。我一直在学习 next.js 及其动态路由。

标签： url-rewriting next.js

【解决方案1】：

@felixmosh 在评论中建议简单地使用 next.js 动态路由，它允许在路径中使用多个 slug，无需使用重写。这行得通！

这里是官方手册的链接 - https://nextjs.org/docs/routing/dynamic-routes。

【讨论】：

【解决方案2】：

找到的解决方案：

async rewrites() {
    return [
      {
        source: '/work/:slug/:path*',
        destination: '/work/:slug',
      },
    ]
  },

【讨论】：