Next.js重写规则获取user-agent识别设备类型的实现方案咨询

rewrite捕获User-Agent的修正方案 #

你当前的rewrite捕获User-Agent的语法本身是合规的，但存在两个核心问题导致无法达到预期效果：

1. User-Agent包含大量空格、括号、斜杠等特殊字符，直接作为query参数传递会被编码截断，无法拿到完整的UA内容
2. getStaticProps是构建阶段执行的静态生成逻辑，请求时动态传入的query参数根本不会传入getStaticProps，只有SSR（getServerSideProps）、动态路径ISR可以拿到请求侧的动态参数

如果要在rewrite中正确传递UA给服务端逻辑，推荐用自定义请求头代替query参数，避免编码问题，配置示例如下：

async rewrites() {
    return {
        afterFiles: [
            {
                has: [
                    {
                        type: 'host',
                        value: '(?<host>.*)',
                    },
                    {
                        type: 'header',
                        key: 'User-Agent',
                        value: '(?<ua>.*)',
                    },
                ],
                source: '/',
                destination: '/organizations/:host',
                // 用自定义头传递UA，不会有编码问题
                headers: {
                    'X-Captured-UA': ':ua',
                }
            },
        ],
    };
},

调整后如果使用getServerSideProps，直接读取context.req.headers['x-captured-ua']即可拿到完整的UA内容。

更优的设备识别实现方案 #

不需要通过rewrite传参也可以实现设备类型识别，根据你的渲染方案可以选择对应实现：

• SSR/Next.js 13+ 服务端组件场景：直接读取请求自带的User-Agent头解析即可，无需额外配置
  示例代码（getServerSideProps）：

  import UAParser from 'ua-parser-js';
  
  export async function getServerSideProps(context) {
    const { req } = context;
    const host = req.headers.host;
    // 直接解析UA得到设备类型
    const uaParser = new UAParser(req.headers['user-agent']);
    const deviceType = uaParser.getDevice().type || 'desktop'; // 取值为mobile/tablet/desktop
  
    // 此处根据host和deviceType拉取对应数据即可
    return {
      props: {
        host,
        deviceType,
        // 其他业务数据
      }
    }
  }
  

  组件拿到deviceType参数后直接判断渲染不同的DOM结构即可。
• 保留SSG/ISR静态生成场景：可以通过路径前缀区分设备类型，rewrite根据UA自动重写到对应路径，用户侧无感知，同时支持getStaticProps读取路径参数生成对应静态页
  配置示例：

  async rewrites() {
    return {
      afterFiles: [
        // 移动端匹配
        {
          has: [
            { type: 'host', value: '(?<host>.*)' },
            { type: 'header', key: 'User-Agent', value: '.*(Mobile|Android|iPhone).*' },
          ],
          source: '/:path*',
          destination: '/m/:path*?host=:host',
        },
        // 平板匹配
        {
          has: [
            { type: 'host', value: '(?<host>.*)' },
            { type: 'header', key: 'User-Agent', value: '.*(iPad|Tablet).*' },
          ],
          source: '/:path*',
          destination: '/t/:path*?host=:host',
        },
        // 桌面端默认匹配
        {
          has: [{ type: 'host', value: '(?<host>.*)' }],
          source: '/:path*',
          destination: '/d/:path*?host=:host',
        }
      ]
    }
  }
  

  对应建立[deviceType]动态路由，getStaticProps可以直接读取路径中的deviceType参数生成对应设备的静态页面。
• 纯客户端场景：如果不想调整服务端逻辑，也可以在客户端hydrate完成后解析navigator.userAgent判断设备类型渲染对应结构，为了避免首次加载闪动可以搭配骨架屏或者CSS媒体查询做基础适配。

内容的提问来源于stack exchange，提问作者elyas.m