React服务端渲染Next.js，帮你迭代React项目快速加载

服务端加载

注意只能在父组件里面执行，子组件无法执行
如果没有安装axios,请先执行

 yarn add axios

//服务端加载的钩子
//getInitialProps 参数
1.   `pathname` - URL 的 path 部分
2.   `query` - URL 的 query 部分，并被解析成对象
3.   `asPath` - 显示在浏览器中的实际路径（包含查询部分），为`String`类型
4.   `req` - HTTP 请求对象 (只有服务器端有)
5.   `res` - HTTP 返回对象 (只有服务器端有)
6.   `jsonPageRes` - 获取数据响应对象 (只有客户端有)
7.   `err` - 渲染过程中的任何错误

  static async getInitialProps({ query }) {
    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-blog

npm 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`"
            }
        ]
    ]
}

然后重启项目就可以