next.js+koa2+antd环境轻松搭建

本文将会介绍next.js环境的搭建,这里将会以next+koa2+ant desin为例,搭建全栈开发的环境,看完后我想大家应该也会知道如何将next与express,egg.js等框架和element UI等UI组件库进行自由组合，选择出适合自己的方案。

适合人群: 对于node.js有了解,对于react有了解，听过服务端渲染但并没有实践过，知道next.js但是不会将其与后端框架与UI组件库组合的小伙伴。

Tips: 本文作者也是一个菜鸟,写文章的意图一方面为了加强自己对next的掌握程度，另一方面希望可以帮到真有这样需求的小伙伴。

使用自定义的方式搭建next环境

创建项目目录

mkdir next-learn
cd next-learn

如果使用windows的小伙伴,可以下载git，通过git bash来使用以上命令，或者去通过桌面环境去创建next-learn文件夹，这里希望大家都可以尽量使用命令行来进行操作。

npm/yarn初始化

这里我想大家对于npm都比较了解,但是可能有很多小伙伴听说过yarn但并没有去了解过。这里简单说一下: npm的下载速度有时候真的很让人难受，yarn的出现可以使这种情况有很大的缓解,甚至很多情况它比使用淘宝镜像还要快，感兴趣的小伙伴可以去官网简单了解并下载使用。

npm init
yarn init

大家可以一直回车,这里我将使用yarn

next, react, react-dom的安装

这一步next.js官网介绍的也很详细

npm install next react react-dom --save
yarn add next react react-dom

更改package.json文件

通过 npm init 的小伙伴打开package.json会有"scripts"字段 但通过 yarn init 初始化的package.json没有"scripts"字段，因为yarn初始化后会删除package.json中空对象，我们可以自行增加

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},
复制代码

next项目的运行

• 在项目根目录创建 pages 目录
• 在根目录打开命令行 工具 执行 npm run dev 或 yarn dev 打开项目，项目默认在3000端口打开，然后chrome中进入 http:localhost:3000

  

• 我们会在浏览器中看到404，这是因为我们再pages目录中什么都没放，显示这种样子已经ok了

  

创建pages/index.js

• 在pages目录中创建index.js文件

export default () => <h1>hello this is my first next.js page</h1>
复制代码

此时浏览器中应该可以显示我们缩写的信息了

使用create-next-app脚手架搭建next环境

这种方式是自动化的，所做的工作与我们上面的差不多

• 全局安装 npm install -g create-next-app

create-next-app的三种使用方式

npx create-next-app next-learn2
yarn create next-app next-learn2
create-next-app next-learn

脚手架方式与手动安装的区别

• 脚手架的方式更加自动化，比较简单
• 脚手架工具安装之后会比我们手动安装多一个components目录和static目录,components目录中放了两个组件,static目录中放了一个favicon.ico，我们可以将其替换为自己项目的favicon.ico

其他地方跟我们手动方式创建的是一样的,通过 yarn dev 打开项目看看效果

加入koa2

next.js自带服务器，但是它可以做的事情很有限，只能处理ssr渲染。 我们可以将next.js作为koa的一个中间件来使用，当然您也可以选择express和egg.js，使用方式都很类似。

安装koa

npm install koa --save
yarn add koa

在根目录创建server.js

const Koa = require('koa')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = new Koa()
  server.use(async (ctx, next) => {
    await handle(ctx.req, ctx,res)
    ctx.respond = false
  })

  server.listen(3000, () => {
    console.log('server is running at http://localhost:3000')
  })
})
复制代码

这里说一下 app.prepare() ,我们需要等待pages目录下的所有页面被编译完成，然后再启动koa的服务。 这里的 handle(ctx.req, ctx.res) 这里传入的req和res都是nodejs原生的http模块中的内容，如果使用express或egg.js，请注意这里的参数

更改package.json

我们要讲package.json中"scripts"字段中的"dev"改为 "dev": "node ./server.js", 因为我们现在要启动koa服务器了 然后在命令行输入"yarn dev"或"npm run dev"启动服务

页面正常访问

然后大家就可以按照koa或其他node.js框架进行后端开发了

加入ant design

设置next.js正常解析CSS

next.js默认配置是无法解析css文件的，我们需要再根目录创建一个 next.config.js 的配置文件 安装一个插件 @zeit/next-css npm安装 npm install @zeit/next-css --save yarn安装 yarn add @zeit/next-css

在配置文件中使用：

const WithCss = require('@zeit/next-css')

if(typeof require !== 'undefined') {
    require.extensions['.css'] = file => {}
}

module.exports = WithCss({})
复制代码

如果要支持sass，可以使用 WithSass(WithCss({})) ，具体方式大家可以亲自动手查一查

大家可以随便写个css测试一下，这里我更改了标题的颜色

安装antd和babel-plugin-import

npm install antd babel-plugin-import
yarn add antd babel-plugin-import

添加babel配置在根目录创建 .babelrc 文件

{
    "presets": ["next/babel"],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd"
            }
        ]
    ]
}
复制代码

presets中添加 ["next/babel"] 让babel支持next中的所有用到的babel配置的插件 plugins中引入antd以支持antd按需引入

引入antd的css文件

在pages目录中创建 _app.js 文件,这里是覆盖next中App组件的地方，这里我们暂不对App组件进行更改，只是引入，然后原样导出，顺便引入antd的css文件

import App from 'next/app'
import 'antd/dist/antd.css'

export default App
复制代码

Tips: 没有在 .babelrc 中进行css配置是因为mini-css-extract-plugin使用会存在bug

尝试我在index.js中引入一个Button组件，成功按预期进行显示

import { Button } from 'antd'

......
<Button>Antd Button</Button>
......
复制代码

总结

好了，这里介绍了next.js+koa+antd的组合方式，如果大家有兴趣，可以尝试自己喜欢的其他组合方式

写在最后

笔者是一位前端实习生，懂得的也不是很多，以前学习中遇到的问题或者学习笔记一直都存在印象笔记中，没有发表过，存了上百篇，现在觉得还是边写东西边分享出来吧，毕竟之前找工作过程中大家都问有没有写过技术博客，然后我只能尴尬的说我写的都存在印象笔记中，建议大家以后也可以变学习变分享，别像我之前一样把写的东西都藏起来。

后续将会持续更新一些学习与生活中的感想与学习笔记，目前还有点毕设和毕业论文以及工作压力，可能更新会慢点