next-useragentnext.js 解析用户代理字符串工具

next-useragent 用于为 next.js 解析浏览器的用户代理字符串。

安装

$ npm install next-useragent

用法

next-useragent 的用法非常简单，使用withUserAgent方法，可以随时随地访问用户代理的详细信息。

• 作为 getInitialProps 方法的参数传递。


• 作为 React 组件的属性传递。

高阶组件

import React from 'react'

import dynamic from 'next/dynamic'

import { WithUserAgentProps, withUserAgent } from 'next-useragent'



const DesktopContent = dynamic(() => import('./desktop-content'))

const MobileContent = dynamic(() => import('./mobile-content'))



class IndexPage extends React.Component<WithUserAgentProps> {



  static async getInitialProps(ctx) {

    return { useragent: ctx.ua.source }

  }



  render() {

    const { ua, useragent } = this.props



    return (

      <>

        <p>{ useragent }</p>

        { ua.isMobile ? (

        <MobileContent />

        ) : (

        <DesktopContent />

        ) }

      </>

    )

  }

}



export default withUserAgent(IndexPage)