[migrate] replace Next.js API handler with Koa router

Author: TechQuery

models/Base.ts

@@ -1,4 +1,5 @@
 import { HTTPClient } from 'koajax';
+import { githubClient } from 'mobx-github';
 
 export const isServer = () => typeof window === 'undefined';
 
@@ -15,6 +16,22 @@ export const ownClient = new HTTPClient({
   responseType: 'json',
 });
 
+const GithubToken = process.env.GITHUB_TOKEN;
+
+if (!isServer()) githubClient.baseURI = `${API_Host}/api/GitHub/`;
+
+githubClient.use(({ request }, next) => {
+  if (GithubToken)
+    request.headers = {
+      authorization: `Bearer ${GithubToken}`,
+      ...request.headers,
+    };
+
+  return next();
+});
+
+export { githubClient };
+
 export interface Base {
   id: number;
   createdAt: string;

models/Repository.ts

@@ -1,26 +1,10 @@
 import {
-  githubClient,
   GitRepository,
   RepositoryFilter,
   RepositoryModel as GitRepoModel,
 } from 'mobx-github';
 import { Stream } from 'mobx-restful';
 
-import { API_Host, isServer } from './Base';
-
-const GithubToken = process.env.GITHUB_TOKEN;
-
-if (!isServer()) githubClient.baseURI = `${API_Host}/api/GitHub/`;
-
-githubClient.use(({ request }, next) => {
-  if (GithubToken)
-    request.headers = {
-      authorization: `Bearer ${GithubToken}`,
-      ...request.headers,
-    };
-  return next();
-});
-
 const MainOrganization = 'freeCodeCamp-China';
 
 export class RepositoryModel extends Stream<GitRepository, RepositoryFilter>(
@@ -50,7 +34,7 @@ export class RepositoryModel extends Stream<GitRepository, RepositoryFilter>(
     }
 
     if (hasAdditional)
-      // @ts-ignore
+      // @ts-expect-error Mixin type issue
       yield await this.getOne('freeCodeCamp/chinese', filter.relation);
   }
 }

package.json

@@ -13,6 +13,7 @@
     "@fortawesome/react-fontawesome": "^0.2.6",
     "@giscus/react": "^3.1.0",
     "idea-react": "^2.0.0-rc.13",
+    "koa": "^3.1.1",
     "koajax": "^3.1.2",
     "less": "^4.4.2",
     "less-loader": "^12.3.0",
@@ -46,6 +47,7 @@
     "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
     "@stylistic/eslint-plugin": "^5.5.0",
     "@types/eslint-config-prettier": "^6.11.3",
+    "@types/koa": "^3.0.1",
     "@types/lodash": "^4.17.20",
     "@types/next-pwa": "^5.6.9",
     "@types/node": "^22.19.0",

pages/api/GitHub/[...slug].ts

@@ -1,3 +1,12 @@
-import { proxyGithub } from './core';
+import { createKoaRouter, withKoaRouter } from 'next-ssr-middleware';
 
-export default proxyGithub();
+import { safeAPI } from '../core';
+import { proxyGitHubAll } from './core';
+
+export const config = { api: { bodyParser: false } };
+
+const router = createKoaRouter(import.meta.url);
+
+router.get('/(.*)', safeAPI, proxyGitHubAll);
+
+export default withKoaRouter(router);

pages/api/GitHub/core.ts

@@ -1,22 +1,36 @@
-import { githubClient } from 'mobx-github';
+import { Context, Middleware } from 'koa';
+import { githubOAuth2 } from 'next-ssr-middleware';
 
-import { safeAPI } from '../core';
+import { githubClient } from '../../../models/Base';
 
-export const proxyGithub = <T>(dataFilter?: (path: string, data: T) => T) =>
-  safeAPI(async ({ method, url, headers, body }, response) => {
-    delete headers.host;
+export const proxyGithub = async <T>({
+  method,
+  url,
+  headers: { host, ...headers },
+  request,
+}: Context) => {
+  const path = url!.slice(`/api/GitHub/`.length),
+    body = Reflect.get(request, 'body');
 
-    const path = url!.slice(`/api/GitHub/`.length);
+  // @ts-expect-error KoAJAX type compatibility
+  return githubClient.request<T>({ method, path, headers, body });
+};
 
-    const { status, body: data } = await githubClient.request<T>({
-      // @ts-expect-error Upstream Type compatibility issue
-      method,
-      path,
-      // @ts-expect-error Upstream Type compatibility issue
-      headers,
-      body: body || undefined,
-    });
+export const proxyGitHubAll: Middleware = async context => {
+  const { status, body } = await proxyGithub(context);
 
-    response.status(status);
-    response.send(dataFilter?.(path, data as T) || data);
-  });
+  context.status = status;
+  context.body = body;
+};
+
+const client_id = process.env.GITHUB_OAUTH_CLIENT_ID!,
+  client_secret = process.env.GITHUB_OAUTH_CLIENT_SECRET!;
+
+export const ProxyBaseURL = 'https://chinese.fcc-cd.dev/proxy';
+
+export const githubSigner = githubOAuth2({
+  rootBaseURL: process.env.VERCEL ? undefined : `${ProxyBaseURL}/github.com/`,
+  client_id,
+  client_secret,
+  scopes: ['user:email', 'read:user', 'public_repo', 'read:project'],
+});

pages/api/core.ts

@@ -1,58 +1,38 @@
+import { Context, Middleware } from 'koa';
 import { HTTPError } from 'koajax';
-import { NextApiRequest, NextApiResponse } from 'next';
-import { githubOAuth2 } from 'next-ssr-middleware';
 import { ProxyAgent, setGlobalDispatcher } from 'undici';
 
 const { HTTP_PROXY } = process.env;
 
 if (HTTP_PROXY) setGlobalDispatcher(new ProxyAgent(HTTP_PROXY));
 
-export type NextAPI = (
-  req: NextApiRequest,
-  res: NextApiResponse,
-) => Promise<any>;
+export const safeAPI: Middleware<any, any> = async (context: Context, next) => {
+  try {
+    return await next();
+  } catch (error) {
+    if (!(error instanceof HTTPError)) {
+      console.error(error);
 
-export function safeAPI(handler: NextAPI): NextAPI {
-  return async (req, res) => {
-    try {
-      return await handler(req, res);
-    } catch (error) {
-      if (!(error instanceof HTTPError)) {
-        console.error(error);
+      context.status = 400;
 
-        res.status(400);
-
-        return res.send({ message: (error as Error).message });
-      }
-      const { message, response } = error;
-      let { body } = response;
-
-      res.status(response.status);
-      res.statusMessage = message;
-
-      if (body instanceof ArrayBuffer)
-        try {
-          body = new TextDecoder().decode(new Uint8Array(body));
-          console.error(body);
-
-          body = JSON.parse(body);
-          console.error(body);
-        } catch {
-          //
-        }
-      res.send(body);
+      return (context.body = { message: (error as Error).message });
     }
-  };
-}
+    const { message, response } = error;
+    let { body } = response;
 
-const client_id = process.env.GITHUB_OAUTH_CLIENT_ID!,
-  client_secret = process.env.GITHUB_OAUTH_CLIENT_SECRET!;
+    context.status = response.status;
+    context.statusMessage = message;
 
-export const ProxyBaseURL = 'https://chinese.fcc-cd.dev/proxy';
+    if (body instanceof ArrayBuffer)
+      try {
+        body = new TextDecoder().decode(new Uint8Array(body));
+
+        body = JSON.parse(body);
+      } catch {
+        //
+      }
+    console.error(JSON.stringify(body, null, 2));
 
-export const githubSigner = githubOAuth2({
-  rootBaseURL: process.env.VERCEL ? undefined : `${ProxyBaseURL}/github.com/`,
-  client_id,
-  client_secret,
-  scopes: ['user:email', 'read:user', 'public_repo', 'read:project'],
-});
+    context.body = body;
+  }
+};

pages/user/session.tsx

@@ -7,7 +7,7 @@ import { Container } from 'react-bootstrap';
 import { PageHead } from '../../components/PageHead';
 import { i18n, I18nContext } from '../../models/Translation';
 import { UserModel } from '../../models/User';
-import { githubSigner } from '../api/core';
+import { githubSigner } from '../api/GitHub/core';
 
 export const getServerSideProps = compose(githubSigner);