2024-09-20 react next.js在server组件根据设备类型处理不同的样式思路

由于next.js分为在服务器渲染跟在客户端渲染，在服务器渲染是没法直接拿到navigator api，这时候要借助next.js的headers拿到客户端发起请求的请求头，它可以在next.js里面拿到.
首先从next/header中

'use server';
import { cookies, headers } from 'next/headers';
import { isMobileHandleByUserAgent } from 'src/utils/mobileHandle';

 //获取请求头
 const userAgent = headers().get('user-agent')
  let isMobile = false;
  if(userAgent){
    isMobile= isMobileHandleByUserAgent(userAgent)
  }

mobileHandle.ts文件示例代码 判断手机设备类型

export const isMobileHandle = () => {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent,
    );
}
export const isMobileHandleByUserAgent = (navigatorUserAgent:string) => {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigatorUserAgent,
    );
}

客户端组件屏幕判断可以直接获取，hooks封装示例代码如下：

import { useState, useEffect } from 'react';
import { isMobileHandle } from 'src/utils/mobileHandle';

export const useDeviceType = () => {
  
  const [isMobile, setIsMobile] = useState(isMobileHandle())

  useEffect(() => {
    window.addEventListener('resize', () => {
      setTimeout(() => {
        setIsMobile(isMobileHandle());
      }, 0);
    });
    return () => {
      window.removeEventListener('resize', () => { });
    };
  }, [])
  return { isMobile, setIsMobile }
}