refactor: change API proxy from Serverless Functions to Serverless Middlewares to save Function Invocations on vercel

app/api/[...endpoint]/route.ts

@@ -1,49 +0,0 @@
-import { NextResponse, NextRequest } from "next/server";
-import { fetchDataViaGet, fetchDataViaPost } from "../utils";
-import { API_URL } from "../config";
-import { buffer } from "stream/consumers";
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: { endpoint: Array<string> } }
-) {
-  const { endpoint } = params;
-  let API_V2: boolean | string =
-    req.nextUrl.searchParams.get("API_V2") || false;
-  if (API_V2 === "true") {
-    req.nextUrl.searchParams.delete("API_V2");
-  }
-  const query = req.nextUrl.searchParams.toString();
-  const url = `${API_URL}/${endpoint.join("/")}${query ? `?${query}` : ""}`;
-
-  const response = await fetchDataViaGet(url, API_V2);
-  return NextResponse.json(response);
-}
-
-export async function POST(
-  req: NextRequest,
-  { params }: { params: { endpoint: Array<string> } }
-) {
-  const { endpoint } = params;
-  let API_V2: boolean | string =
-    req.nextUrl.searchParams.get("API_V2") || false;
-  if (API_V2 === "true") {
-    req.nextUrl.searchParams.delete("API_V2");
-  }
-  const query = req.nextUrl.searchParams.toString();
-  const url = `${API_URL}/${endpoint.join("/")}${query ? `?${query}` : ""}`;
-  let body;
-  const ReqContentTypeHeader = req.headers.get("Content-Type") || "";
-  let ResContentTypeHeader = "";
-
-  if (ReqContentTypeHeader.split(";")[0] == "multipart/form-data") {
-    ResContentTypeHeader = ReqContentTypeHeader;
-    body = await req.arrayBuffer();
-  } else {
-    ResContentTypeHeader = "application/json; charset=UTF-8";
-    body = JSON.stringify(await req.json());
-  }
-
-  const response = await fetchDataViaPost(url, body, API_V2, ResContentTypeHeader);
-  return NextResponse.json(response);
-}

app/api/config.ts

@@ -1,7 +1,7 @@
 export const CURRENT_APP_VERSION = "3.1.1";
 
 export const API_URL = "https://api.anixart.tv";
-export const API_PREFIX = "/api";
+export const API_PREFIX = "/api/proxy";
 export const USER_AGENT =
   "AnixartApp/8.2.1-23121216 (Android 9; SDK 28; arm64-v8a; samsung SM-G975N; en)";
 
@@ -25,7 +25,6 @@ export const ENDPOINTS = {
   },
   collection: {
     base: `${API_PREFIX}/collection`,
-    list: `${API_PREFIX}/collection/list`,
     addRelease: `${API_PREFIX}/collectionMy/release/add`,
     create: `${API_PREFIX}/collectionMy/create`,
     delete: `${API_PREFIX}/collectionMy/delete`,

app/api/utils.ts

@@ -16,7 +16,7 @@ export const fetchDataViaGet = async (
       headers: HEADERS,
     });
     if (response.status !== 200) {
-      throw new Error("Error fetching data");
+      return null;
     }
     const data = await response.json();
     return data;
@@ -45,7 +45,7 @@ export const fetchDataViaPost = async (
       body: body,
     });
     if (response.status !== 200) {
-      throw new Error("Error fetching data");
+      return null;
     }
     const data = await response.json();
     return data;

app/components/CollectionInfo/CollectionInfo.Basics.tsx

@@ -1,5 +1,4 @@
 import { Card, Button, Avatar } from "flowbite-react";
-import { useState } from "react";
 import { unixToDate } from "#/api/utils";
 import Link from "next/link";
 

app/components/CollectionLink/CollectionLink.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { sinceUnixDate } from "#/api/utils";
 import { Chip } from "#/components/Chip/Chip";
 
 export const CollectionLink = (props: any) => {

app/pages/Profile.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { useUserStore } from "#/store/auth";
 import { useEffect, useState } from "react";
-import { fetchDataViaGet } from "../api/utils";
 import { Spinner } from "../components/Spinner/Spinner";
 import { Avatar, Card, Button, Table } from "flowbite-react";
 import { Chip } from "../components/Chip/Chip";
-import { unixToDate, minutesToTime } from "../api/utils";
+import { fetchDataViaGet, unixToDate, minutesToTime } from "../api/utils";
 import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel";
+import { ENDPOINTS } from "#/api/config";
 
 export const ProfilePage = (props: any) => {
   const authUser = useUserStore((state) => state);
@@ -15,7 +15,7 @@ export const ProfilePage = (props: any) => {
 
   useEffect(() => {
     async function _getData() {
-      let url = `/api/profile/${props.id}`;
+      let url = `${ENDPOINTS.user.profile}/${props.id}`;
       if (authUser.token) {
         url += `?token=${authUser.token}`;
       }

app/pages/Release.tsx

@@ -16,6 +16,7 @@ import { ReleaseInfoRelated } from "#/components/ReleaseInfo/ReleaseInfo.Related
 import { ReleaseInfoScreenshots } from "#/components/ReleaseInfo/ReleaseInfo.Screenshots";
 import { CommentsMain } from "#/components/Comments/Comments.Main";
 import { InfoLists } from "#/components/InfoLists/InfoLists";
+import { ENDPOINTS } from "#/api/config";
 
 export const ReleasePage = (props: any) => {
   const userStore = useUserStore();
@@ -25,7 +26,7 @@ export const ReleasePage = (props: any) => {
   function useFetch(id: number) {
     let url: string;
 
-    url = `/api/release/${id}`;
+    url = `${ENDPOINTS.release.info}/${id}`;
     if (userStore.token) {
       url += `?token=${userStore.token}`;
     }

app/store/auth.ts

@@ -1,6 +1,7 @@
 "use client";
 import { create } from "zustand";
 import { getJWT, removeJWT, fetchDataViaGet } from "#/api/utils";
+import { ENDPOINTS } from "#/api/config";
 
 interface userState {
   _hasHydrated: boolean;
@@ -44,7 +45,7 @@ export const useUserStore = create<userState>((set, get) => ({
     if (jwt) {
       const _checkAuth = async () => {
         const data = await fetchDataViaGet(
-          `/api/profile/${jwt.user_id}?token=${jwt.jwt}`
+          `${ENDPOINTS.user.profile}/${jwt.user_id}?token=${jwt.jwt}`
         );
         if (data && data.is_my_profile) {
           get().login(data.profile, jwt.jwt);

middleware.ts

@@ -0,0 +1,71 @@
+import type { NextFetchEvent } from 'next/server';
+import { fetchDataViaGet, fetchDataViaPost } from '#/api/utils';
+import { API_URL } from '#/api/config';
+
+export const config = {
+  matcher: '/api/proxy/:path*',
+};
+
+export default async function middleware(request: Request, context: NextFetchEvent) {
+  if (request.method == "GET") {
+    const url = request.url
+    const path = url.match(/\/api\/proxy\/(.*)/)?.[1]
+
+    const data = await fetchDataViaGet(`${API_URL}/${path}`);
+
+    if (!data) {
+      return new Response(JSON.stringify({ message: "Error Fetching Data" }), {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    }
+
+    return new Response(JSON.stringify(data), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+
+  if (request.method == "POST") {
+    const url = new URL(request.url);
+    const isApiV2 = url.searchParams.get("API-Version") == "v2" || false;
+    if (isApiV2) {
+      url.searchParams.delete("API-Version");
+    }
+    const path = url.pathname.match(/\/api\/proxy\/(.*)/)?.[1] + url.search
+
+    const ReqContentTypeHeader = request.headers.get("Content-Type") || "";
+    let ResContentTypeHeader = "";
+    let body = null;
+
+    if (ReqContentTypeHeader.split(";")[0] == "multipart/form-data") {
+      ResContentTypeHeader = ReqContentTypeHeader;
+      body = await request.arrayBuffer();
+    } else {
+      ResContentTypeHeader = "application/json; charset=UTF-8";
+      body = JSON.stringify(await request.json());
+    }
+
+    const data = await fetchDataViaPost(`${API_URL}/${path}`, body, isApiV2, ResContentTypeHeader);
+
+    if (!data) {
+      return new Response(JSON.stringify({ message: "Error Fetching Data" }), {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    }
+
+    return new Response(JSON.stringify(data), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+}