Next JS 在重写中使用查询参数作为变量 [英] Next JS Use query parameter as variable in rewrite

问题描述

使用 Next JS 我想将路径 /home?id=123qwert 上的请求重定向到 /home/123qwert

Using Next JS I want to redirect requests on path /home?id=123qwert to the new destination path of /home/123qwert

我在从源中提取查询参数以在目标中再次使用时遇到问题.

I'm having issues with extracting the query parameter from the source to be used again in the destination.

这是我当前的实现:

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

我有一个主页的动态页面设置为 /home/[id].js

I have a dynamic page setup for home as /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*"}

推荐答案

你可以使用 查询匹配 使用 has 字段来匹配查询值的重写，使用 beforeFiles 语法所以匹配发生在文件系统检查之前.

You can use query matching using the has field to match a rewrite by query values, with the beforeFiles syntax so the match happens before the filesystem check.

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'
             }
         ]
    };
}

这篇关于Next JS 在重写中使用查询参数作为变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！