next.js+koa2+antd环境轻松搭建-蒲公英云
next.js+koa2+antd环境轻松搭建
忘是亡心i
2022-10-01 11:43
385阅读
0赞
## 前言 ##
> 本文将会介绍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官网][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 --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安装`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的组合方式，如果大家有兴趣，可以尝试自己喜欢的其他组合方式
**写在最后**
> 笔者是一位前端实习生，懂得的也不是很多，以前学习中遇到的问题或者学习笔记一直都存在印象笔记中，没有发表过，存了上百篇，现在觉得还是边写东西边分享出来吧，毕竟之前找工作过程中大家都问有没有写过技术博客，然后我只能尴尬的说我写的都存在印象笔记中，建议大家以后也可以边学习边分享，别像我之前一样把写的东西都藏起来。
> 后续将会持续更新一些学习与生活中的感想与学习笔记，目前还有点毕设和毕业论文以及工作压力，可能更新会慢点
转载于:https://juejin.im/post/5cbb362351882532525a1082
[yarn]: https://link.juejin.im?target=https%3A%2F%2Fyarn.bootcss.com%2F
[next.js]: https://link.juejin.im?target=http%3A%2F%2Fnextjs.frontendx.cn%2Fdocs%2F%23%25E5%25AE%2589%25E8%25A3%2585
收藏
关注
赞(
海报
QQ 分享
微博分享
微信分享
分享
发表评论
取消回复
表情：
评论列表
（有
条评论，
385
人围观）
还没有评论，来说两句吧...
相关阅读
相关
.Dubbo
环境
--------------------
Dubbo 安装
1-Windows 安装 Zookeeper
2-Windows 安装管理控制台 dubbo-a
分手后的思念是犯贱
2023年01月08日 08:20
85
阅读
轻松
机器学习/深度学习开发
人工智能学习从入门到放弃往往就是从配置环境开始，希望通过一篇文章让大家能轻松搭建人工智能开发环境。
我们从操作系统开始谈起
现在操作系统你可以选择Windo
逃离我推掉我的手
2022年10月05日 04:49
142
next.js+koa
antd
前言
> 本文将会介绍next.js环境的搭建,这里将会以next+koa2+ant desin为例,搭建全栈开发的环境,看完后我想大家应该也会知道如何将next与exp
2022年10月01日 11:43
386
struts
最的基本环境搭建
第一步：拷贝jar包，以下为最少jar包，根据版本不同会有，不同，不过可以根据运行调试逐步加jar包
struts2-core-2.x.x.jar :St
╰+攻爆jí腚メ
2022年08月13日 03:00
199
Jenkins
本次对构建触发器进行相关说明
Build after other projects are built
Build periodically：定时
落日映苍穹つ
2022年07月27日 10:48
166
mobile(一)
以前需要一个组件，大概就3步，下载、引入、测试。
现在用个组件可能就是n步了，一个下午都没把antd mobile的组件展示出来，各种坑啊，看着官方文档一步一步也还是满地坑
r囧r小猫
2022年06月10日 06:20
261
vue
.0
1、安装 node.js 
从官网上下载 https://nodejs.org/en/ 装上
2、全局安装 webpack 
npm install we
小鱼儿
2022年06月02日 07:26
145
NodeJs
一、NodeJs的环境搭建
        Nodejs是执行在服务端的js语言，其中js执行的语言需要js的执行引擎，而nodejs在安装的时候就默认的有一个c
柔情只为你懂
2022年05月28日 12:36
218
Struts
开发
搭建Struts2环境时，我们一般需要做以下几个步骤的工作：
　　1、创建javaweb工程
　　2、找到开发Struts2应用需要使用到的jar文件
　　3、创建
痛定思痛。
2021年12月15日 07:55
292
react 脚手架
ui库
、配置less
默认已经是按需加载
cnpm install -S antd
import {Button} from 'antd'
import 'an
2021年07月24日 22:30
401