TRPC works in local but got 404 in production

const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: "/api/:path*",
        has: [
          {
            type: "header",
            key: "x-shared-key",
          },
        ],
        destination:
          process.env.NODE_ENV === "development"
            ? "http://127.0.0.1:8000/api/:path*"
            : "/api",
      },
    ];
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
        port: "",
        pathname: "**",
      }
    ],
  },
};

module.exports = nextConfig;

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextResponse } from "next/server";

import type { NextRequest } from "next/server";

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient({ req, res });

  const {
    data: { user },
  } = await supabase.auth.getUser();

  const { data } = await supabase
    .from("users")
    .select("data, username")
    .eq("id", user?.id)
    .single();

  if (data?.data === null) {
    return NextResponse.redirect(new URL("/survey", req.url));
  }

  // if user is signed in and the current path is / redirect the user to /account
  // if (user && req.nextUrl.pathname === "/") {
  //   return NextResponse.redirect(new URL("/account", req.url));
  // }

  // if user is not signed in and the current path is not / redirect the user to /
  if (!user && req.nextUrl.pathname !== "/") {
    return NextResponse.redirect(new URL("/sign-in", req.url));
  }

  return res;
}

export const config = {
  matcher: ["/", "/account"],
};