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：稳定分流可靠；移动与桌面体验一致