React + Next.js + Koa2 开发Github全栈项目（实践篇一）

该文章是整理基于

React

复制代码

+

Next.js

复制代码

+

Koa2

复制代码

开发Github的全栈项目的知识点（

Jokcy

复制代码

Web前端工程师的课程），课程链接见文章末尾。[h3]nextjs 作为 koa 的中间件使用[/h3]为什么要用 koa？
首先我们来了解一下服务器的概念：

nextjs
复制代码
自身带有服务器，只处理 SSR 渲染。我们在启动
1. nextjs
复制代码
项目的时候，可以看到
1. 终端
复制代码
显示
1. ready on http://localhost:3000
复制代码
，如下图：

这个就是它启动的一个
1. nodejs
复制代码
的一个服务，然后它监听的是 3000 端口。
1. nextjs
复制代码
服务只能处理像
1. pages
复制代码
文件夹里面的文件编译成页面，对应其路由返回对应的服务端渲染的内容。
1. index.js
复制代码
是一个 Javascript 文件，只有当它被
1. React
复制代码
渲染了之后，才能得到真正的 HTML 字符串的，这个过程
1. nextjs
复制代码
已经在服务端渲染的过程中处理掉了。这是
1. nextjs
复制代码
自带服务的一个功能。
处理 HTTP 请求，并根据请求数据返回相应的内容。对于
1. nextjs
复制代码
的服务器，它只会处理页面的请求，渲染出
1. React
复制代码
的 HTML 内容。还有就是 JS 的请求，
1. nextjs
复制代码
将 JS 打包，可以部署到客户端进行渲染。对于其他相关数据的请求，
nextjs
复制代码
没有提供这方面的功能，但是我们还是需要进行其他数据的请求，那么就需要采取别的措施了。
根据域名之类的 HOST 来定位服务器。这个就是启动之后，要绑定域名的一些相关内容了。

[h3]nextjs无法处理服务端[/h3]

数据接口
数据库连接
session状态这里
1. nextjs
复制代码
无法处理的一些操作，我们就采用
1. Koa
复制代码
来进行处理。我们将
1. Koa
复制代码
作为自己开发的一个服务，而将
1. nextjs
复制代码
作为一个中间件来使用。

[h3]为什么要使用 Koa[/h3]

Koa
复制代码
是一个非常流行的轻量级
nodejs
复制代码
服务端框架。它能够非常快捷方便的帮我们创建一个
1. nodejs
复制代码
的服务器。
项目相对轻量，并不需要很多集成的功能。如果我们要做一个业务比较多比较复杂的，那么我们就会有很多不一样的选择，比如
1. eggjs
复制代码
，这是更适合进行业务开发的一个
1. nodejs
复制代码
的一个框架，还有
1. Sails
复制代码
等等。这里我们不过多讲解服务端的框架，我们主要还是讲解
1. nextjs
复制代码
，所以我们这里使用
1. Koa
复制代码
这个轻量级的框架来作为服务端框架的使用。
非常易于扩展，编程模式非常符合 JS 特性。

下一篇文章会给小伙帮讲解有关于
Koa
复制代码
的一些基础使用方式，以及课程中需要使用到的一些
Koa
复制代码
相关内容，能够帮助大家理解我们为什么使用它，以及后期想学更多的
Koa
复制代码
相关的内容打下一定的基础。这个课程主要还是讲
nextjs
复制代码
，有关于
Koa
复制代码
更多的内容这个课程不会太全面的去讲解。但是课程中运用到的
Koa
复制代码
还是会完整的讲解到的。

[h3]实践[/h3]1. 项目中需要集成

Koa

复制代码

，首先需要先安装

Koa

复制代码

。在

终端

复制代码

输入：

yarn add koa

复制代码

。

2. 安装完成后，在根目录下创建一个

server.js

复制代码

的文件。这个文件是启动

Koa

复制代码

和

nodejs

复制代码

的入口文件。在

server.js

复制代码

下输入：

const Koa = require('koa') // 引入 koaconst next = require('next') // nextjs 作为中间件const dev = process.env.NODE_ENV !== 'production' // 判断是否处于开发者状态const app = next({ dev }) // 初始化 nextjs，判断它是否处于 dev：开发者状态，还是production: 正式服务状态const handle = app.getRequestHandler() // 拿到 http 请求的响应// app.prepare：编译 pages 文件夹下面的页面文件，then 是保证 pages 下页面全部编译完了之后，我们才能真正的启动服务来响应请求。// 如果这些内容我们没有编译完成，那么启动服务响应请求的时候可能会报错。app.prepare().then(() => { const server = new Koa() // 声明一个 server /** 这是 Koa 的核心用法：中间件。通常给 use 里面写一个函数，这个函数就是中间件。 * params: * ctx: Koa Context 将 node 的 request 和 response 对象封装到单个对象中，为请求上下文对象 * next: 调用后将执行流程转入下一个中间件，如果当前中间件中没有调用 next，整个中间件的执行流程则会在这里终止，后续中间件不会得到执行 */ server.use(async (ctx, next) => { await handle(ctx.req, ctx.res) ctx.response = false }) server.listen(3000)})

复制代码

上面是最基础的启动方式，下面来启动一下项目，修改

package.json

复制代码

中

dev

复制代码

为

node server.js

复制代码

，在

终端

复制代码

输入：

npm run dev

复制代码

，启动项目。

打开页面正常显示，命令行也没有报错，正常打出了

koa server listening on 3000

复制代码

字样，说明启动成功。现在我们成功的将

nextjs

复制代码

集成到了

Koa

复制代码

当中了，那么就可以通过

server

复制代码

处理其他路由相关的内容。这个我们就放到下一篇文章去讲解。
实践篇一就到这边就结束了，接下来会持续更新~~~

想要进行视频学习的小伙伴们可以进入慕课网进行视频学习：
链接：https://coding.imooc.com/class/334.html
本文主要对
慕课网
复制代码
课程教程的整理和总结，侵权及删除

更多前端知识点，关注混日子码农吧