How to configure Next.js config rewrites between two microfrontends?

Question

I'm trying to organize a microfrontend architecture of two existing Next.js apps. Setup (when asked select app router without src folder, other options irrelevant):

npx [email protected] main
npx [email protected] redirect

redirect/package.json:

"dev": "next dev -p 3001",

main/app/page.tsx:

import Link from "next/link";

export default function Home() {
  return (
    <main>
      <h1>
        Main
      </h1>
      <Link href="/redirect">
        <h2>
          Redirect
        </h2>
      </Link>
    </main>
  );
}

redirect/app/page.tsx:

import Link from "next/link";

export default function Home() {
  return (
    <main>
      <h1>
        Redirect
      </h1>
      <Link href="/">
        <h2>
          Main
        </h2>
      </Link>
    </main>
  );
}

Maybe add a little bit of styling, to later check that static assets are being served correctly. So I have main app listening on port 3000. When user hits /redirect route I want to redirect him to redirect app on port 3001:

main/next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/:path*",
        destination: `/:path*`,
      },
      {
        source: "/redirect",
        destination: `http://localhost:3001/redirect`,
      },
      {
        source: "/redirect/:path*",
        destination: `http://localhost:3001/redirect/:path*`,
      },
    ];
  },
};

module.exports = nextConfig;

And I want redirect to be served as :3000/redirect, so I add

redirect/next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: "/redirect",
};

module.exports = nextConfig;

Now I expect tht click on redirect link on main ap page will bring me to redirect app but nothing happens. How to solve this problem?

tnsaturday · Accepted Answer · 2024-08-27 14:05:20Z

0

Ok, I finally found out what was causing the problem. Such approach (using next.config.js rewrites section) to building micro-frontends is called Multi-Zones. And you have to use an <a> tag instead of <Link> component when navigating between the zones. That's it!

answered Aug 27, 2024 at 14:05

tnsaturday

6233 gold badges12 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to configure Next.js config rewrites between two microfrontends?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related