'Rewrite rule not working on Amplify for Create React App deployment

I have a Create React App deployed on AWS Amplify and everything here works as expected. Let's call it https://my-cra-application.com for later reference.

I have another Next.js Application which is deployed on vercel with basePath as /shop in next.config.js. The deployment on Vercel is successful and the application loads under https://my-next-application.com/shop <-- using just as an example url for later reference.

What I'm trying to do is, in the create react app deployment on Amplify I want to deploy the Next.js project under a url /shop. Hence the basePath in next.config.js

I want https://my-cra-application.com/shop should show the Next.js Application https://my-next-application.com/shop

I did the following in Amplify, under Rewrites and redirects

source: https://my-cra-application.com/shop 
target: https://my-next-application.com/shop
type: 200 (Rewrite)

But when I visit https://my-cra-application.com/shop, I just get the 404 page from CRA app instead of the Next.js project.

I checked https://my-next-application.com/shop and the link works just fine.

Does anyone know what might be the issue here ?

Thanks.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source