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进行初始化：npm init
• yarn进行初始化: yarn init

你们能够一直回车,这里我将使用yarn

next, react, react-dom的安装

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

• npm安装 npm install next react react-dom --save
• yarn安装 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的三种使用方式

1. 经过npx进行安装npx create-next-app next-learn2（npx在node.js8以上版本默认已安装）
2. 经过yarn create安装yarn create next-app next-learn2 （我使用的方式）
3. 经过create-next-app进行安装 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安装 npm install koa --save
• yarn安装 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 --saveyarn安装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安装npm install antd babel-plugin-import
• yarn安装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的组合方式，若是你们有兴趣，能够尝试本身喜欢的其余组合方式

写在最后

笔者是一位前端实习生，懂得的也不是不少，之前学习中遇到的问题或者学习笔记一直都存在印象笔记中，没有发表过，存了上百篇，如今以为仍是边写东西边分享出来吧，毕竟以前找工做过程当中你们都问有没有写过技术博客，而后我只能尴尬的说我写的都存在印象笔记中，建议你们之后也能够边学习边分享，别像我以前同样把写的东西都藏起来。

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