如何在 Next.js 框架下使用 Ant Design，是我们每个前端人必会的，所以决定单独整理一篇笔记来讲一下，希望对你有帮助。
Ant Design 是一款阿里开源的前端组件库，我在工作中也一直在使用，我觉的它是目前阿里开源的前端项目是最成功的,使用人数也是最多的一个。不过它的初心是用来搭建项目的中后台系统，比如后台的管理系统。从 React 的角度来讲，它就是一个组件库，里边封装了开发中最常用的一些组件，让我们可以通过简单的配置就可以使用他们。
让 Next.js 支持 CSS 文件
在前面的笔记中我讲过Next.js默认是不支持 CSS 文件的，它用的是style jsx，也就是说它是不支持直接用import进行引入css的。
在根目录下新建一个文件夹static，在文件夹下建立一个test.css文件，写入一些CSS Style。
body{
color:green;
}
然后用import在header.js里引入。
写完这些后到浏览器中进行预览，没有任何输出结果而且报错了。这说明Next.js默认是不支持 CSS 样式引入的，要进行一些必要的设置，才可以完成。
开始进行配置，让 Next.js 支持 CSS 文件
先用yarn命令来安装@zeit/next-css包，它的主要功能就是让Next.js可以加载 CSS 文件，有了这个包才可以进行配置。
npm install --save @zeit/next-css
也可用yarn命令来安装@zeit/next-css包
yarn add @zeit/next-css
包安装好以后就可以进行配置文件的编写了，建立一个next.config.js，这个就是Next.js的总配置文件（如果感兴趣可以自学一下）。
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
require.extensions['.css']=file=>{}
}
module.exports = withCss({})
这段代码你有兴趣是可以看看的，其实我对配置文件基本不记忆的，因为配置文件就是别人规定的配置，你写就好。比如要使用 CSS 就可以把上面这段代码输入到放入到里边的就好了。
注：修改配置文件需要重新启一下服务，重启服务可以让配置生效，这时候你到浏览器中可以发现 CSS 文件已经生效了，字变成了绿色。
这时候Ant Design已经起作用了，我们也完成了在Next.js中，使用Ant Design的目的。