我把 NextJS 的 App Router 搬到了 Server 端，写一个后端框架有多简单

Hello

大家好，我是 anuoua ，自从很久以前写了前端框架 Unis 后，很长一段时间觉得啥都不感兴趣，期间做了 NextJS 的项目，突然对全栈框架产生了兴趣， NextJS 是真的好用，其中一点是 App Router 模式下的项目组织方式，特别优雅。

于是萌生了一些小想法。。

首先， App Router 是可以用在 Vue React 等所有的前端框架的，同时 NextJS 是全栈框架，那么它也适用后端。

转念一想，那么 App Router 不就可以单独抽离出来么，那不就有事干了？打开 Github 创建仓库，输入 app-route (带r名字被占了), 创建。

点个 start 再走。

本质上这个包其实很简单

解析指定目录输出目录树结构，同时在解析每个树节点的时候可以自定义解析 当前目录下的资源，比如一些特殊文件路径、元数据等，也就拥有了适配前端、后端的能力，自己写 resolve 就行。

提供路由匹配方法，参考 NextJS App Router 的方式进行路由匹配，匹配结果为匹配到的目录节点 和路由参数。

那么有了这两个功能，就可以想干什么就干什么了。

在使用 NextJS 的时候，我一直在想，要是后端可以用 App Router 多爽。NextJS 身为全栈框架本身支持后端，但是它不合适。

怎么办？自己写！

很多人可能不知道，NodeJS 的那套 Http Server API 已经过时了，现在是 Fetch API 的时代！

也许有人有疑问，fetch 和服务端有什么关系？

在这里需要介绍一下 Fetch API 两个重要的类 Request 和 Response，我猜你用了这么久的 fetch 应该已经察觉，前后端 Request 和 Response 是可以同构的。

javascript 复制代码

// client
const response = fetch(new Request(...));

// server
const app.use((request) => {
    return new Response(...)
})

前后端都处理一样的 req 和 res，不觉得很优雅么？

事实上，现在新出的 JS Server 框架，很多都是直接支持 Fetch API 标准的，比如 hono.js，而新出的 JS runtime 可以直接使用 Fetch API 标准的 Server API，比如 Bun 比如 Deno。

用他们写一个服务非常简单

javascript 复制代码

import { serve } from "bun";

serve({
  fetch: (request) => new Response("hello world"),
  port: 8080,
});

看到 fetch 方法没有，用这个写 API 很容易，而且在 Response 加持下操作返回数据的能力变强了很多，在 ts 类型加持下，开发体验非常不错。原生 Node 的 res 则很难用。

刚才说道 NodeJS 不支持这套 Server API，怎么办？这么好用的 API，当然是兼容咯，@hono/node-server 这个包提供了兼容层，感谢 hono.js。

app-route 有了，API 也确定使用 Fetch API，那么似乎只剩下一套 koa 一样的洋葱圈中间件的设施了吧。

没错，如果了解 koa 的话，那么我们可以很容易写出一个 compose 方法，搭配 app-route 包，我们可以很快的实现框架原型，具体可以看源码哦，很简单的。

如下目录结构，使用 app-route 的时候，需要解析出每个目录中的功能文件的路径，放入目录节点中，供框架处理，简单介绍一下单个目录内的一些文件。

用一个例子解释一下这个框架的玩法，现在有如下文件系统目录

bash 复制代码

app
├── middleware.ts #1
└── roles
    ├── middleware.ts #2
    └── [id]
        ├── GET.ts
        └── middleware.ts #3

启动 Server，浏览器访问 GET /roles/xx 的时候，中间件执行的顺序为

csharp 复制代码

request #1
  request #2
    request #3
      get
    response #3
  response #2
response #1

框架本身实现很简单，总共100多行就搞定了（不包含 app-route ），功能已经挺完善的了，写一堆中间件就可以上战场了。

这类框架其实对 Serverless 服务比较友好，比如 vercel 等，我觉得真的很好用。

说了这么久，框架叫啥都不知道吧，这个框架就叫做 fanl。大概是第一个这么做的后端框架吧？？！哈哈

Github fanl。

都看了，还不点个 start ？谢谢。