服务端加载

留神只能在父组件外面执行，子组件无奈执行
如果没有装置axios,请先执行

 yarn add axios
//服务端加载的钩子  static async getInitialProps({ props }) {    var res = await axios.post("url",{      rpType: "xx",    });    //最终挂载在 props上    var serverData = res.data.resultObject;      return serverData ;  }

获取接口为this.props.serverData

路由跳转写法规定扭转

React写法

            this.props.history.push({               pathname: "/myStock",               search: `state=7&type=2`,         }); //最终生成的路由为 http://localhost:3000/myStock?state=7&type=2

Next.js写法为

import Router from 'next/router' // 导入引入进来的  Router.push({    pathname: '/myStock',     query: {       state: 7,      type:2    }  })  //取值  `this.props.url.query.url`

路由生成规定

react须要本人配置路由
Next.js，是主动生成的路由，只有写在pages文件下即可

图片的引入形式扭转

React的写法

<img src={require("../assets/distrsearch.png")} />

Next.js写法为 需放在public/static目录中assets为我本人生成的名字，能够为任意

<img src="/static/assets/distrsearch.png" />

聊了那么多想不想下载安装一个呢？

Next.js官网传送门
要创立 Next.js 利用，请关上你的终端窗口，cd 进入您要在其中创立应用程序的目录，而后运行以下命令：如果不胜利，请查看 此页面。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"cd nextjs-blognpm run dev

让咱们检查一下是否失常。在浏览器中关上
http://localhost:3000 。

如果关上浏览器看到这个阐明装置胜利

Next.js 开发服务器具备热重载性能。对文件进行更改时，Next.js 会主动在浏览器中利用这些更改。无需刷新！此性能将帮忙您疾速迭代应用程序。

装置sass

这是刚下载完生成的页面

款式也是jsx的语法，那么咱们来装置sass
接下来就是用yarn命令来装置@zeit/next-css包，它的次要性能就是让Next.js能够加载CSS文件，有了这个包才能够进行配置。

yarn add @zeit/next-css

装置sass

yarn add @zeit/next-sass node-sass

因为我外面还也装置的UI库，所以我还装置了，他能能够让咱们同时援用多个插件，这里感激原文作者

npm install --save next-compose-plugins

包下载实现后，在我的项目根目录下，新建一个next.config.js文件。即Next.js的总配置文件。写入上面的代码:

const withSass = require('@zeit/next-sass')const withCss = require('@zeit/next-css');const withPlugins = require("next-compose-plugins");module.exports = withPlugins([withSass,withCss], {  webpack: (config) => {    return config  },});

这里我装置的UI为Ant Design Mobile

npm install react-app-rewired customize-cra --save-dev

在pages新建_app.js文件

import App from 'next/app';import 'antd-mobile/dist/antd-mobile.css';export default App;

而后再装置一下babel-plugin-import，命令如下：

yarn add babel-plugin-import

这里感激原文作者
装置实现后，在我的项目根目录建设.babelrc文件，而后写入如下配置文件：

{    "presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它自身的所有配置    "plugins":[     //减少新的插件，这个插件就是让antd能够按需引入，包含CSS        [            "import",            {                "libraryName":"`antd-mobile`"            }        ]    ]}

而后重启我的项目就能够