After deploy projects configured with Vercel or Nextjs rewriting can't find assets path

Question

I have the following structure to use one domain to multiple projects:

1. A repo that contains a single vercel.json file to configure path to others projects
2. A repo that contains a home app example
3. A repo that contains a checkout app example

The vercel.json works pretty great and is deployed in nizen.com.br, here is how is it:

// vercel.json
{
  "rewrites": [
    {
      "source": "/checkout",
      "destination": "https://checkout.nizen.com.br/checkout"
    },
    {
      "source": "/",
      "destination": "https://home.nizen.com.br"
    }
  ]
}

So if we go to nizen.com.br we get the home app example without styles and a bunch of errors in console trying to get the assets of home.nizen.com.br in nizen.com.br and the same happens to checkout app.

Here is one of the similar errors that appear in console on Home app:

And here is the checkout app:

About the app next.config.js files, only Home app stays untouched and Checkout app has a basePath added with value "/checkout" as follows:

// Checkout app next.config.js
module.exports = {
  reactStrictMode: true,
  basePath: "/checkout",
};

I have tried to use the Next rewrites in hope that will solve the problem but it didn't work.

// example of rewrite that I did
module.exports = {
  async rewrites() {
    return [
      {
        source: "/",
        destination: "https://home.nizen.com.br",
      },
    ];
  },
};

I tried to pass :path* and :path in source and destination, as well use fallback and even change the destination to checkout app to see if something change and none of that worked.

If I got to https://home.nizen.com.br the app runs perfect and same to checkout. What am I doing wrong?

Answer 1

I have solved this question changing the strategy. Instead of using a repo with vercel.json to route the micro-frontends, I'm using the home app as the project hosted in nizen.com.br and it's next.config.js file is the one who makes the magic happen!

//Home App next.config.js file
module.exports = {
  reactStrictMode: true,
  async rewrites() {
    return {
      fallback: [
        {
          source: "/checkout",
          destination: "https://checkout.nizen.com.br/checkout",
        },
        {
          source: "/checkout/:path*",
          destination: "https://checkout.nizen.com.br/checkout/:path*",
        },
      ],
    };
  },
};

Both the source and destination must point to the same sub-path (/checkout) and both fallback blocks are necessary. I'm using Next version 12 by the time I'm writing this.