title: NextJS Rewrites keeps on refreshing
body: <p>I've two projects,</p>
  <ul>
  <li><strong>Project 1</strong> - React + Electrode - <em><a href="http://www.example.com/au" rel="nofollow noreferrer">www.example.com/au</a></em></li>
  <li><strong>Project 2</strong> - Next Js - <em><a href="http://www.example.com/au/sell-your-car" rel="nofollow noreferrer">www.example.com/au/sell-your-car</a></em></li>
  </ul>
  <p><strong>Project 2</strong> has a middleware to detect whether the <strong>request</strong> is coming from <strong>desktop/mobile</strong>.</p>
  <p>The <strong>Project 2</strong> page folder looks like the following:</p>
  <ul>
  <li>pages
  <ul>
  <li>_viewport
  <ul>
  <li>desktop
  <ul>
  <li>au
  <ul>
  <li>sell-your-car</li>
  </ul>
  </li>
  </ul>
  </li>
  <li>mobile
  <ul>
  <li>au
  <ul>
  <li>sell-your-car</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <blockquote>
  <p>_middleware.tsx</p>
  </blockquote>
  <pre><code>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 ? &quot;mobile&quot; : &quot;desktop&quot;;
  }
  
  /** @type {import(&quot;next/server&quot;).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);
  }
  </code></pre>
  <p>I want to set up rewrites in such a way that they should support all the routes after the <strong>/sell-your-car</strong> route.</p>
  <p>e.g.</p>
  <ul>
  <li><em><a href="http://www.example.com/au/sell-your-car" rel="nofollow noreferrer">www.example.com/au/sell-your-car</a></em></li>
  <li><em><a href="http://www.example.com/au/sell-your-car/1" rel="nofollow noreferrer">www.example.com/au/sell-your-car/1</a></em></li>
  <li><em><a href="http://www.example.com/au/sell-your-car/1/2" rel="nofollow noreferrer">www.example.com/au/sell-your-car/1/2</a></em> (and so on)</li>
  </ul>
  <p>Other than that all the routes should redirect to the Project 1 (React)</p>
  <blockquote>
  <p>next.config.js</p>
  </blockquote>
  <pre><code>async rewrites() {
      return [
        {
          source: &quot;/:path*&quot;,
          destination: &quot;/:path*&quot;
        },
        {
          source: &quot;/:path*&quot;,
          destination: &quot;http://localhost:3001/:path*&quot; // Rewrite non-migrated routes to Create React App
        }
      ];
    }
  </code></pre>
  <p>With the current config, the <strong>/sell-your-car</strong> page is getting refreshed continuously.</p>