Next.js 모바일과 PC를 구분해서 다른 경로로 이동 시키기(middleware 사용)

function isMobileUserAgent(userAgent: string): boolean {
  const mobileRegex = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  return mobileRegex.test(userAgent);
}

// 루트 디렉토리에 middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get('user-agent') || '';
  const isMobile = isMobileUserAgent(userAgent);
  const url = request.nextUrl.clone();

  // 이미지와 같은 리소스는 redirect하지 않음
  const isAsset = url.pathname.match(/\.(png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$/);
  if (isAsset) {
    return NextResponse.next();
  }

  if (isMobile && url.pathname.startsWith('/v2')) {
    // 모바일 디바이스일 때 '/v2' 경로 제거
    url.pathname = url.pathname.replace(/^\/v2/, '');
    return NextResponse.redirect(url);
  } else if (!isMobile && !url.pathname.startsWith('/v2')) {
    // PC 디바이스일 때 '/v2' 경로 추가
    url.pathname = `/v2${url.pathname}`;
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

// config의 matcher를 설정하여 정규식을 허용하므로 부정 예측 또는 문자 일치와 같은 일치가 지원됩니다.
export const config = {
  matcher: ['/((?!_next|api|favicon.ico).*)'],
};