Next JS Use query parameter as variable in rewrite

Question

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.

Here is my current implementation:

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

I have a dynamic page setup for home as /home/[id].js

I keep getting the following error:

Reason: Unexpected MODIFIER at 5, expected END

  /home?id=:cmsId*
       ^

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

Answer 1

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