服务端加载注意只能在父组件执行，子组件不能执行。如果没有安装axios，请执行yarnaddaxios//服务器端加载Hook//getInitialProps参数1.`pathname`-URL的路径部分2.`query`-URL的查询部分，并被解析intoanobject3.`asPath`-实际显示在浏览器中的路径（包括查询部分），为`String`类型4.`req`-HTTP请求对象（只有服务端有）5.`res`-HTTP返回对象（只有服务器端有）6.`jsonPageRes`-获取数据响应对象（只有客户端）7.`err`-渲染期间的任何错误staticasyncgetInitialProps({query}){varres=awaitaxios.post("url",{rpType:"xx",});//最后挂载到props上varserverData=res.data.resultObject;returnserverData;}获取接口为this.props.serverData路由跳转写法改变React写法this.props.history.push({pathname:"/myStock",search:`state=7&type=2`,});//最终生成的路由是http://localhost:3000/myStock?state=7&type=2Next.js写成importRouterfrom'next/router'//ImportandimportIncomingRouter.push({pathname:'/myStock',query:{state:7,type:2}})//value`this.props.url.query.url`路由生成规则React需要自己配置路由Next.js，这是一个自动生成的路由，只要写在pages文件里面，图片的导入方式可以改变。React的写法next.js要放在public/static目录，assets生成的名字可以是任意看了那么多还要下载安装一个吗？Next.js官方门户要创建Next.js应用程序，请打开终端窗口，cd到要创建应用程序的目录，然后运行以下命令：如果不成功，请参阅此页面npxcreate-next-appnextjs-blog--use-npm--example"https://github.com/vercel/next-learn-starter/tree/master/learn-starter"cdnextjs-blognpmrundev让我们检查它是否有效。在浏览器中打开http://localhost:3000。如果你打开浏览器看到这个，就说明安装成功了。Next.js开发服务器具有热重载功能。当对文件进行更改时，Next.js会自动在浏览器中应用这些更改。无需刷新！此功能将帮助您快速迭代您的应用程序。安装sass这是刚下载后生成的页面样式，也是jsx的语法，所以先安装sass，然后用yarn命令安装@zeit/next-css包。它的主要功能是让Next.js加载CSS文件，用这个包可以配置。yarnadd@zeit/next-cssinstallsassyarnadd@zeit/next-sassnode-sass因为我在里面也安装了UI库，所以我也安装了，他可以让我们同时引用多个插件，感谢原文作者npminstall--savenext-compose-plugins包下载完成后，在项目根目录新建next.config.js文件。即Next.js的总配置文件。编写以下代码：constwithSass=require('@zeit/next-sass')constwithCss=require('@zeit/next-css');constwithPlugins=require("next-compose-plugins");module。exports=withPlugins([withSass,withCss],{webpack:(config)=>{returnconfig},});这里我安装的UI是AntDesignMobilenpminstallreact-app-rewiredcustomize-cra--save-devcreatesanew_app.jsfileinpagesimportAppfrom'next/app';导入'antd-mobile/dist/antd-mobile.css';导出默认应用程序；然后安装babel-plugin-import，命令如下：yarnaddbabel-plugin-import感谢原作者。安装完成后，在项目根目录下创建.babelrc文件，然后写入如下配置文件：{"presets":["next/babel"],//Next.js总的配置文件相当于继承自己所有的配置"plugins":[//新增一个插件，这个插件是为了让antd按需导入，包括CSS["import",{"libraryName":"`antd-mobile`"}]]}然后重启项目
