1：搭建next开发环境
npx create-next-app blog
复制代码2：进入blog目录
cd blog
复制代码3：使用yarn测试
yarn dev
复制代码如果能够进入到下面的界面，说明前三步已经成功了！
4：让next支持CSS文件
yarn add @zeit/next-css
复制代码5：按需加载antd
yarn add antd
yarn add babel-plugin-import
复制代码6：在pages目录下建立_app.js文件，并写入下列内容
import App from 'next/app'
import 'antd/dist/antd.css'
export default App
复制代码7：引入Button组件
import React from 'react'
import Head from 'next/head'
import {Button} from 'antd'
const Home = () => (
<>
<Head>
<title>Home</title>
</Head>
<div><Button>我是按钮</Button></div>
</>
)
export default Home
复制代码8：测试实现效果
出现下面的效果，表示前台环境搭建成功！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
