【化蛹为蝶四】Nextjs 自定义服务端框架（以接入 Koa 为例）

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战 ​

上篇 我们唠了唠 Nextjs 项目的目录结构，谈了谈我经历的几次目录结构调整 ​

今天再填个坑：Nextjs 自定义服务端框架的法子 ​

使用了 Nextjs 为什么还需要自定义服务端框架

Nextjs 作为客户/服务双端通吃的框架，为什么还需要自定义服务端框架呢? ​

一方面是 Nextjs 大包大揽，包掉了许多功能，导致丧失了一定的灵活性 ​

另一方面则是由于一些项目是从原有的 "React + 模板引擎 + 某服务端框架" 集合而成的自研架构 ​

但又想要无缝迁移使用 Nextjs，这个时候 "React + 模板引擎" 这部分可以使用 Nextjs 自有的 ​

然而服务端这边总不可能再直接使用 Nextjs 自有的了 ​

因为原有项目的服务端一定沉淀或使用了一些该服务端配套的中间件/工具 ​

这总不能大改吧 ​

所以这个时候就需要不使用 Nextjs 自有的服务端，而是使用自定义的服务端框架了 ​

接入 Koa2

我这里是因为公司自有架构使用的 Koa 服务端，我就拿 Koa 来集成到个人项目里，顺便练练手夯实一下 ​

其实这块接入并不复杂，主要是放出来代码，让大伙瞧瞧 ​

了解了我个人自定义的 Koa 都做了什么事儿，后面文章也好拓展一下 ​

文件位置：根目录/server.js，代码如下：

总结一下，这里我一共做了这样几件事：（代码也备注了）

• 初始化了一些配置并挂载到上下文里
• 支持 Public 目录静态文件访问
• 初始化 Mysql、Redis 连接
• 加载了一些自定义中间件
• 初始化 Graphql 服务器
• 初始化日志记录器
• 初始化 Session

嗯，今天也就到这儿，就分享 Nextjs 自定义服务端这一个点

算是又填了一个坑 ​

后续预告：

• 一些小问题：目录结构（已填）、集成 Koa（本篇）、@根路径 Import、引入 Less、Yaml 解析、引入 Reset CSS、日志记录与存储
• Nextjs 系列序言及项目初始化（已填）
• Nextjs 引入 TypeScript、Ant Design（已填）
• Nextjs 引入 Prisma 和 Mysql2 存取数据（长文）
• Nextjs 引入 Apollo-Server/Apollo-Client 使用 Graphql（长文）
• Nextjs + Prisma + Graphql Demo 实践（长文）
• Nextjs 如何使用 Session 和 Cookie
• Nextjs 基于 Graphql、Prisma 的 JWT 登录鉴权（长文）
• Nextjs 鉴权后自动跳转登录页
• Graphql 请求如何带上公共 Headers
• Koa Auth 接口预处理之接口鉴权中间件
• 基于 RBAC 模型使用 Graphql + Prisma 实现权限管理（长文）

​

vx👦:mmm7nnn

公号🐓：醒途

邮箱📧：suanzao@wacai.com（欢迎找我内推）

​

如果喜欢这个系列请给我一个点赞👍或者一个关注➕，诸君的支持是我创作的最大的动力