I've two projects,

• Project 1 - React + Electrode - www.example.com/au
• Project 2 - Next Js - www.example.com/au/sell-your-car

Project 2 has a middleware to detect whether the request is coming from desktop/mobile.

The Project 2 page folder looks like the following:

• pages
  • _viewport
    • desktop
      • au
        • sell-your-car
    • mobile
      • au
        • sell-your-car

_middleware.tsx

function getViewport(userAgent: UserAgent | null | undefined) {
  if (!userAgent?.ua) return;
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent.ua);
  return isMobile ? "mobile" : "desktop";
}

/** @type {import("next/server").NextMiddleware} */

export function middleware(req: NextRequest) {
  const url = req.nextUrl.clone();

  // Prevent internals from being accessed canonically
  // (i.e. if you try to go to example.com/_viewport it should give a 404)
  if (url.pathname.startsWith(`/_viewport`)) {
    return new Response(null, { status: 404 });
  }

  const viewport = getViewport(req.ua);

  url.pathname = `_viewport/${viewport}${url.pathname}`;

  return NextResponse.rewrite(url);
}

I want to set up rewrites in such a way that they should support all the routes after the /sell-your-car route.

e.g.

• www.example.com/au/sell-your-car
• www.example.com/au/sell-your-car/1
• www.example.com/au/sell-your-car/1/2 (and so on)

Other than that all the routes should redirect to the Project 1 (React)

next.config.js

async rewrites() {
    return [
      {
        source: "/:path*",
        destination: "/:path*"
      },
      {
        source: "/:path*",
        destination: "http://localhost:3001/:path*" // Rewrite non-migrated routes to Create React App
      }
    ];
  }

With the current config, the /sell-your-car page is getting refreshed continuously.