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

忘是亡心i 2022-10-01 11:43 392阅读 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