nextjs官网
nextjs
导入本地字体
global.scss
@font-face {
font-family: 'HYk2gj';
src: url('/static/fonts/Montserrat-Light-6.otf');
font-style: normal;
}
设置头部icon和标题
<Head>
<title>Konnect</title>
<link rel="shortcut icon" href="/static/logo_s.png" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></meta>
</Head>
设置移动端和pc端共存
使用了next相关的库next-useragent
一、可以使用屏幕的宽度来适配
window.innerWidth <= 1000
二、通过ua来适配
import React from 'react'
import { withUserAgent } from 'next-useragent'
import DesktopContent from "../view/pc"
import MobileContent from "../view/h5"
import { setRem } from "../utils/rem"
// import VConsole from 'vconsole';
// const vConsole = new VConsole();
class IndexPage extends React.Component {
static async getInitialProps(ctx) {
return { useragent: ctx.ua.source }
}
componentDidMount() {
const { ua } = this.props
if(ua.isMobile) {
const { ua } = this.props
const isMobile = ua.isMobile || ua.isIpad || ua.isAndroid || ua.isAndroid
sessionStorage.setItem("isMobile", isMobile)
setRem()
window?.addEventListener('resize',setRem)
return ()=>{
window?.removeEventListener('resize',setRem)
}
}else {
sessionStorage.removeItem("isMobile")
}
}
render() {
const { ua } = this.props
const isMobile = ua.isMobile || ua.isIpad || ua.isAndroid || ua.isAndroid
return (
<>
{ isMobile ? (
<MobileContent />
) : (
<DesktopContent />
) }
</>
)
}
}
export default withUserAgent(IndexPage)
移动端使用 postcss-px-to-viewport-8-plugin
next.config.js
module.exports = {
plugins: {
"postcss-px-to-viewport-8-plugin": {
unitToConvert: "px",
viewportWidth: 375,
unitPrecision: 3,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
include: /\src\/h5Styles/,
exclude: [
/node_modules/
],
landscape: false
}
},
};
// module.exports = {
// plugins: {
// 'postcss-pxtorem': {
// rootValue: 100,
// replace: true,
// propList: ["*"],
// exclude: /node_modules|^(\/src\/h5Styles\/)$|styles/i
// }
// }
// }
因为会作用于全局 pc的页面没有使用scss 使用style-js
next-seo 进行seo优化
https://www.npmjs.com/package/next-seo
import { NextSeo } from "next-seo";
<NextSeo title="konnect" description="Build The Web3" />
