javascript - Next JS 在重写中使用查询参数作为变量

Question

使用 Next JS 我想重定向路径上的请求 /home?id=123qwert到 /home/123qwert 的新目标路径
我在从源中提取查询参数以在目标中再次使用时遇到问题。
这是我当前的实现:

    async rewrites() {
        return [
            /**
             * My source URL -> /home?id=123qwerty
             * My new destination -> /home/123qwerty
             */
            {
                source: '/home?id=:cmsId*',
                destination: '/home/:cmsId*'
            }
        ];
    }

我有一个主页的动态页面设置为 /home/[id].js我不断收到以下错误:

Reason: Unexpected MODIFIER at 5, expected END

  /home?id=:cmsId*
       ^

`source` parse failed for route {"source":"/home?id=:cmsId*","destination":"/home/:cmsId*"}

Answer 1

您可以使用query matching使用 has匹配查询值重写的字段，beforeFiles语法，因此匹配发生在文件系统检查之前。

async rewrites() {
    return {
        beforeFiles: [
            {
                 source: '/home',
                 has: [
                     {
                         type: 'query',
                         key: 'id',
                         value: '(?<cmsId>.*)' // Named capture group to match anything on the value
                     }
                 ],
                 destination: '/home/:cmsId'
             }
         ]
    };
}