Rewrite path for mobile and desktop folders

[andriiradkevych]

  if (isMobile(userAgent)) {
      return NextResponse.rewrite(
        `${origin}/mobile${encodePath ? encodePath : pathname}`
      );
    } else {
      return NextResponse.rewrite(
        `${origin}/desktop${encodePath ? encodePath : pathname}`
      );
    }

Above you can see snippet of code from next.js _middleware.ts , I see that Fresh also have _middleware , but is it possible to do the same ?

Why do I want to make it ?

I want to make 2 different versions of site for mobile and desktop , detect which device are used on _middleware , and return version of site related to this , but I don't need to have it on path /mobile/home I want to see it on /home . Is it possible ?

[marvinhagemeister]

Something like this should work.

function myMiddleware(req: Request) {
  const prefix = isMobile(req) ? "/mobile" : "/desktop"
  const url = new URL(req.url)
  const newUrl = new URL(`${prefix}${url.pathname}, url.origin).href
  return Response.redirect(newURL.href)
}

[marvinhagemeister]

See https://fresh.deno.dev/docs/concepts/middleware#middleware-destination

[andriiradkevych]

Ok, now it is clear, but this Redirect example which you attached , make 302 redirect , isn't it bad for seo ? Or what do you think ?

[andriiradkevych]

On next by rewrite , it return 200 status , and page I need , but here is pure redirect and url stay the same , but mobile or desktop version returned , is it possible to do ? Maybe in the future

[marvinhagemeister]

Yeah you can pass a custom status code to Response.redirect, see https://developer.mozilla.org/en-US/docs/Web/API/Response/redirect_static

[andriiradkevych]

Made next solution , without redirects, maybe will be useful for someone:

routes/_middleware.ts

import { MiddlewareHandlerContext } from '$fresh/server.ts';

import { isMobile as isMobileDevice } from 'utils/device.ts';

export async function handler(req: Request, ctx: MiddlewareHandlerContext) {
  const userAgent = req.headers.get('user-agent');
  const fileType = req.headers.get('sec-fetch-dest');

  if (userAgent && fileType === 'document') {
    const isMobile = isMobileDevice(userAgent);
    ctx.state.isMobile = isMobile;
    const resp = await ctx.next();
    return resp;
  }

  return ctx.next();
}

routes/index.tsx

import { PageProps } from '$fresh/server.ts';

import MobilePage from 'components/Pages/Home/Mobile/index.tsx';
import DesktopPage from 'components/Pages/Home/Desktop/index.tsx';

const Home = ({ state }: PageProps) => {
  return <>{state.isMobile ? <MobilePage /> : <DesktopPage />}</>;
};

export default Home;

@marvinhagemeister thanks for your help and time