Next.js 15 Edge Middleware 设备检测与路由分流实践 Mobile-Desktop-Route Groups

概览Edge Middleware 读取 UA 判定设备类型，并重写到对应路由组（如 `(mobile)` 与 `(desktop)`）。以 Cookie 固定用户选择，避免跨页切换抖动并兼顾 SEO。middleware.tsimport { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' function isMobile(ua: string) { return /(Android|iPhone|iPad|Mobile)/i.test(ua) } export function middleware(req: NextRequest) { const url = req.nextUrl.clone() const ua = req.headers.get('user-agent') || '' const fixed = req.cookies.get('device')?.value const device = fixed || (isMobile(ua) ? 'mobile' : 'desktop') if (!fixed) { const res = NextResponse.next() res.cookies.set('device', device, { path: '/' }) return res } if (url.pathname === '/') { url.pathname = device === 'mobile' ? '/(mobile)' : '/(desktop)' return NextResponse.rewrite(url) } return NextResponse.next() } export const config = { matcher: ['/((?!_next|api|static).*)'] } 治理要点提供手动切换入口并更新 Cookie，尊重用户选择。与 SEO 协作：canonical 指向主路径，避免重复索引。对机器人与抓取 UA 维持桌面版本，避免误判。验证与指标浏览器：现代浏览器；边缘环境兼容Next.js：15.0+；Edge Runtime：稳定分流可靠；移动与桌面体验一致