关于前端:React服务端渲染Nextjs帮你迭代React项目快速加载

服务端加载

留神只能在父组件外面执行，子组件无奈执行
如果没有装置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-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`"}
        ]
    ]
}

而后重启我的项目就能够