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