代码拉取完成，页面将自动刷新
next-useragent parses browser user-agent strings for next.js.
$ npm install next-useragent
next-useragent is simple to use.
Give access to user-agent details anywhere using withUserAgent method.
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)
The useUserAgent returns UserAgent instance.
import React from 'react'
import dynamic from 'next/dynamic'
import { useUserAgent } from 'next-useragent'
const DesktopContent = dynamic(() => import('./desktop-content'))
const MobileContent = dynamic(() => import('./mobile-content'))
export default props => {
let ua;
if (props.uaString) {
ua = useUserAgent(props.uaString)
} else {
ua = useUserAgent(window.navigator.userAgent)
}
return (
<div>
<p>{ ua.source }</p>
{ ua.isMobile ? (
<MobileContent />
) : (
<DesktopContent />
) }
</div>
)
}
export function getServerSideProps(context) {
return {
props: {
uaString: context.req.headers['user-agent']
}
}
}
The parse returns UserAgent instance.
This works on server side and inside conditions without ESLint throwing errors
import React from 'react'
import dynamic from 'next/dynamic'
import { parse } from 'next-useragent'
const DesktopContent = dynamic(() => import('./desktop-content'))
const MobileContent = dynamic(() => import('./mobile-content'))
export default props => {
let ua;
if (props.uaString) {
ua = parse(props.uaString)
} else {
ua = parse(window.navigator.userAgent)
}
return (
<div>
<p>{ ua.source }</p>
{ ua.isMobile ? (
<MobileContent />
) : (
<DesktopContent />
) }
</div>
)
}
export function getServerSideProps(context) {
return {
props: {
uaString: context.req.headers['user-agent']
}
}
}
The parsed objects looks like the following:
{
source: 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A365 Safari/600.1.4',
deviceType: 'mobile',
deviceVendor: 'Apple',
os: 'iOS',
osVersion: 8,
browser: 'Mobile Safari',
browserVersion: 8,
isIphone: true,
isIpad: false,
isMobile: true,
isTablet: false,
isDesktop: false,
isChrome: false,
isFirefox: false,
isSafari: true,
isIE: false,
isMac: false,
isChromeOS: false,
isWindows: false,
isIos: false,
isAndroid: false,
isBot: false
}
next-useragent is licensed under MIT License.
See LICENSE for more information.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手