In our project, same pages may have different routing flow. For example, when you click buttonA in the homepage ,navigates to /products on desktop but /product/[id] on mobile. And we dont want /m/ in the middle of url nor ?m=true to distinguish if it is mobile version website. To handle this, I use rewrite in the middleware to to the appropriate route( /:path or /m/:path ) based on their viewport. However, I’m not sure if this is the suitable approach or are there better alternatives?


psuedo code

const mobileRedirect = async (request: NextRequest, response: NextResponse) => {
  const url = request.nextUrl;
  if (/^\/m$/.test(url.pathname) || /^\/m\/.+/.test(url.pathname)) {
    url.pathname = url.pathname.replace(/^\/m/, '');

    return NextResponse.redirect(url);
  }

  const VIEWPORT_MOBILE = 'mobile';
  const VIEWPORT_DESKTOP = 'desktop';
  const requestHeaders = new Headers(request.headers);
  const { device } = userAgent(request);
  const viewport =
    device.type === VIEWPORT_MOBILE ? VIEWPORT_MOBILE : VIEWPORT_DESKTOP;
  requestHeaders.set('viewport', viewport);

  if (viewport === VIEWPORT_MOBILE) {
    const newUrl = request.nextUrl.clone();
    newUrl.pathname = `/m${url.pathname === '/' ? '' : url.pathname}`;

    return NextResponse.rewrite(newUrl);
  }

  return response;
};

export const config = {
  matcher: [
    '/((?!api|_next/static|version|favicon.ico|sitemap.xml|robots.txt).*)',
  ],
};

routing

.
├── products/
│   └── page.tsx
├── product/[id]/
│   └── page.tsx
├── shopping-cart/
│   └── page.tsx
├── checkout/
│   └── page.tsx
└── m/
    ├── products/
    │   └── page.tsx
    ├── product/[id]/
    │   └── page.tsx
    ├── shopping-cart/
    │   └── page.tsx
    └── checkout/
        └── page.tsx