Next.js客户端能否实现middleware式NextResponse.rewrite路由重写

客户端无法实现和服务端NextResponse.rewrite完全等价的透明路由重写：服务端rewrite是请求阶段就替换返回内容，地址栏全程无变化，客户端路由层没有能力做到不修改地址、不触发路由匹配就替换整套页面内容，不需要硬复刻服务端rewrite逻辑，有两种可直接落地的适配方案：

方案1：客户端视口监听+组件动态切换（改造成本最低） #

完全适配你现有的pages/mobile、pages/desktop目录结构，不需要改动路由层逻辑：

• 封装视口监听hook，断点统一用你设定的1280px，注意处理SSR hydration匹配问题：

import { useState, useEffect } from 'react'

const DEVICE_BREAKPOINT = 1280
export function useIsMobile() {
  const [isMobile, setIsMobile] = useState(() => {
    if (typeof window === 'undefined') return false
    return window.innerWidth < DEVICE_BREAKPOINT
  })

  useEffect(() => {
    const checkViewport = () => setIsMobile(window.innerWidth < DEVICE_BREAKPOINT)
    window.addEventListener('resize', checkViewport)
    return () => window.removeEventListener('resize', checkViewport)
  }, [])

  return isMobile
}

• 在全局入口_app.js中，根据hook返回的设备状态，动态加载对应目录下的页面组件，全程地址栏保持原有业务路径，不会暴露/mobile、/desktop前缀，resize时组件自动切换，视觉效果和服务端rewrite完全一致。
• 补充middleware规则：所有直接访问/mobile/*、/desktop/*前缀的请求，统一重定向到去掉前缀的对应根路径，避免用户手动输入异常路径导致地址混乱。

方案2：Cookie同步设备状态+服务端重分流（逻辑100%对齐现有middleware） #

你现在遇到的判断冲突，本质是服务端靠UA识别设备、客户端靠视口宽度识别设备，两套判断标准不统一，把判断依据对齐即可：

• 客户端初始化、resize跨1280px断点时，将当前设备类型（mobile/desktop）写入cookie
• 调整middleware逻辑：优先读取请求cookie中存储的设备类型执行rewrite，cookie无值时再回退到原有UA判断逻辑
• 客户端检测到resize跨断点时，执行router.refresh()（Next.js 13+版本）或window.location.reload()触发页面重新请求，服务端会读取最新的cookie值，走和首次访问完全一致的rewrite逻辑返回对应页面，两端逻辑完全统一，不会出现判断偏差。

选型参考：

• 两套页面交互逻辑、资源体积差异较大时选方案2，能保证当前视口下只加载对应端的资源，避免移动端加载PC端冗余JS，唯一的感知是跨断点时页面会触发一次刷新
• 不想让用户感知到刷新、两套页面差异较小时选方案1，切换更丝滑，改造成本更低

内容的提问来源于stack exchange，提问作者Andrii Radkevych