（nextjs篇）nextjs基础部分

一、构建项目(使用create-next-app)

1-1安装全局的create-next-app

>cnpm i -g create-next-app

1-2创建next的项目

>yarn create next-app name

 

1-3安装工具(PS:封装了nextjs加载css的配置)

>yarn add @zeit/next-css

 

1-4集成antd

4.1antd按需加载问题

使用babel-plugin-import来进行按需加载。

 

4.2安装antd

>yarn add antd

 

4.3安装babel-plugin-import

>yarn add babel-plugin-import

 

4.4根目录下创建.babelrc文件

 

4.5src目录下创建_app.js

 

4.6效果展示

 

二、nextjs的基础使用

2-1项目目录

components --存放开发组件

lib--存放非组件形式的公用型代码

pages--开发文件，默认匹配路由

public--公共图片资源位置

 

2-2页面跳转

1.Link 进行前端路由跳转

 

2.Router模块

 

3.动态路由

只能通过query

获取传递参数

 

4.路由映射

Link上的as属性

【页面访问的路由展示方式】

存在问题：

刷新页面之后会出现404 （PS：不存在该路由 /a/1这种）

解决办法：视频3-4中使用koa框架。。。

 

5.路由变化的钩子（Router）

监控生命周期状态。

 

6.nextjs数据获取方式getInitialProps

在页面中获取数据

在App中获取数据

 

数据获取规范：

 

7.nextjs自定义App（_app.js）

作用：1）固定Layout 2）保持一些公用的状态 3）给页面传入一些自定义数据 4）自定义错误处理

 

8.nextjs自定义Document（_document.js）

作用：

1）只有在服务端渲染的时候才会被调用 

2）用来修改服务端渲染的文档内容

3）一般用来配合第三方css-in-js方案使用

 

 

9.nextjs样式的定义，集成jsx

<style jsx global>{`

    ....// 全局样式，但是页面卸载样式就不生效了。

`}</style>

 

10.集成styled-components

10-1.安装

>cnpm install styled-components babel-plugin-styled-components --save

在.babelrc文件下添加插件

10-2.在_document.js中导入

1)导入

2)使用

10-3.配置完成使用实例a.js中

10-4.效果展示

 

11.异步模块和组件的加载

11-1.LazyLoading

异步加载模块

异步加载组件

 

11-2.安装moment.js

>cnpm install moment --save

 

a.使用异步加载文件

使用：在a.js中

效果展示：（PS：只在a.js中会导入moment）

b.使用异步加载组件(a.js中)