Nextjs 不完全入坑指南

安装

跟着官网的文档安装项目

路由

通过文件夹创建路由
如下面的about页面，nextjs就会自动创建/about的路由，路由对应的组件是/about/index.jsx

/pages/_app.js

项目的主要入口，在这里引入全局的样式，类似于单页面项目的/public/index.html

默认导出一个react组件

这里是demo

import { useRouter } from 'next/router'
import Head from 'next/head'
function MyApp(props) {// 在这里无法拿到路由信息const { Component, pageProps, menuData = [], isMobileByNode } = propsconst location = useRouter()// 第一次加载会在服务端执行拿到正确的isMobileByNode，跳转页面之后就没有了，所以这里在前端在判断一次const [isMobile, setIsMobile] = useState(isMobileByNode)useEffect(() => {setIsMobile(devices())}, [])// returnreturn (<><Head><!-- 页面的head里面的元素放这里 --><metaname='viewport'content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/></Head>{// 设置不同页面的meta信息--由于我每个页面的keywords和descrition不一样getHead(location.pathname)}<!-- 由于获取屏幕宽度需要在dom onloade之后，在之前页面会出现样式错乱的问题，所以在onload之后再展示主要内容 --><div style={hasClientLoaded ? {} : {opacity: '0'}}><!-- context也可以放这里 --><HomeDataProvider>{isMobile ? (<BasicMobileLayout menuData={menuData}><Component {...pageProps} isMobile={isMobile} /></BasicMobileLayout>) : (<BasicLayout menuData={menuData}><Component {...pageProps} isMobile={isMobile} /></BasicLayout>)}</HomeDataProvider></div></>)
}MyApp.getInitialProps = async context => {const res = await apirequest()const agent = context?.ctx?.req?.headers?.['user-agent']// 通过request请求来判断是否是手机端发来的请求const isMobileByNode = getIsMobileByUserAgent(agent)// api请求放这里--在服务端发起请求，通过把数据返回到MyApp的props中，get页面路由时也会把这些数据渲染到html文件中，也有助于seoreturn { menuData: res }
}export default MyApp

路由信息

用这个对象去跳转和获取url上的信息

import { useRouter } from 'next/router'const NoData = () => {const location = useRouter();// qeury// location.query// 跳转location.push('/about')// 后退location.back()return (<div>// ...</div>)
}

页面级–请求数据–渲染到html字符串中–getServerSideProps

只能在pages文件夹中使用

像在初始渲染时就拿到数据，需要在页面组件处导出名为getServerSideProps的async函数，如果不需要接口数据做seo，也可以在页面加载后使用ajax请求

import { useRouter } from 'next/router'export async function getServerSideProps(context) {// context为路由信息const query = context.queryconst id = query.idconst res = await apirequestxxx(id)return {// 信息可以在组件的props中拿到props: {detailData: res.data}}
}const NoData = ({detailData}) => {return (<div>// ...</div>)
}

一些常见的问题

document/window为undefiend

需要切换思想，在node端是拿不到window对象的，nextjs本质是：

在服务端执行一次组件
生成对应的html字符串，这时候如果有window等客户端的对象会报错（可以页面unload中执行就能避免报错，比如react的useeffect中去执行某些操作）
执行对应的getServerSideProps函数，在服务端请求数据回来，放到组件模板中
服务端渲染好页面之后响应客户端的请求，返回解析好的html字符串

ssr和ssg

配合cdn的缓存，哇，性能真的很好

build和start

运行next build命令会生成一个.next的文件夹，build之后再next start部署相关的服务，需要注意的是，nextjs部署的默认端口是3000，如果需要修改端口号，看下面！

第一次访问页面会很慢，原因是nextjs还没有生成对应的缓存文件

export命令

nextjs会导出静态的html文件，为了更好的缓存
can not be exported问题：在page中使用到了getServerSideProps时就无法导出（本质是在服务端执行getServerSideProps函数，如果导出为静态资源了，getServerSideProps就无法执行了），推荐纯静态页面再使用export

运行（部署）到对应的端口

修改package.json，在对应命令后面加-p 8010 其中8010是对应的端口号

"build:prod": "cross-env REACT_APP_ENV=prod next build",
"start": "next start -p 8010",

环境变量

比如说我的build命令是下面这样的配置：

"build:prod": "cross-env REACT_APP_ENV=prod next build",

这里我用到了cross-env，但是build的时候REACT_APP_ENV不会被加入到环境变量里面(页面中拿不到REACT_APP_ENV)，因为nextjs会自动排除自己不认识的环境变量（为了防止意料之外的bug），那么需要在next.config.js中加配置

const nextConfig = {reactStrictMode: true,swcMinify: true,sassOptions: {},// 环境变量env: {REACT_APP_ENV: process.env.REACT_APP_ENV}
}module.exports = nextConfig

这样就可以在js文件中获取到了：

console.log(process.env.REACT_APP_ENV)