Next.js中使用antd组件

JavaScript010

Next.js中使用antd组件,第1张

Next.js中不能直接使用css,需要我们自行解决:

(1)需要安装 @zeit/next-css : npm install --save @zeit/next-css

(2)安装成功,需要在根目录建立 next.config.js

(3)重启项目

(1)先安装Ant Design 库: npm install --save antd

(2)再安装babel-plugin-import: npm install --save babel-plugin-import

目的:只加载项目中用到的模块,这就需要我们用到一个 babel-plugin-import 文件,配置好了 .babelrc 就不会把Ant Design打包到生产环境。

(3)重启项目

(4)在需要的页面引入

示例数据

在 NextJS 项目下添加文件 ./data/user.json ,示例内容如下

示例读取文件数据

添加页面 ./pages/user.tsx ,示例内容如下

在本文中,您将学到babel,webpack,next.js, 飞冰的一些基础使用。

以及最重要的一点,不屈不挠的爬坑精神。

飞冰是什么

next.js是什么

正文开始

第一步 使用飞冰的模版创建一个项目

这里选择自定义模版,只需要它生成项目框架。

注意:这里先不要添加依赖,飞冰自己安装的webpack版本会导致next.js无法使用自身的配置启动项目。

当然,你也可以像我一样尝试,找一个酷炫的模版

然后经历如下步骤

添加依赖

npm install --save next react react-dom

安装完后,可以安装所有依赖了

npm install

安装完后,配置package.json文件,这里指定pages文件夹位于src下

到这里是不是已经迫不及待想要

npm run dev

一切看起来风和日丽,格外美丽,我们尝试显示NotFound页面

http://localhost:3000/NotFound

WTF?剧情不是这样的啊!为什么会报错,生活终于对我这只小猫咪下手了吗?

这里需要添加flie-loader来解析图片,以及sass的插件来解析scss

npm install file-loader @zeit/next-sass node-sass --save -D

然后在项目根目录新增next.js的配置文件 next.config.js

接下来继续

http://localhost:3000/NotFound

你会碰到几个 document window is undefined的错误,直接找到相应的地方增加判断

然后回到BasicNotFound.jsx中,注释飞冰使用的Link,改为a标签的href

至此,只差最后一个坑我们就能将页面展示出来了,我们需要让项目正确的识别

import IceContainer from '@icedesign/container'

我们使用babel-plugin-module-resolver插件解决

npm install --save-dev babel-plugin-module-resolver

增加.babelrc配置文件来使用该插件

至此,页面可以正确展示。

为什么明明成功展示了,却有种失败的感觉呢。