Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago
01!^3r

TRPC works in local but got 404 in production

I am having this in my next.config.js
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;


on top of trpc, I am also using some python serverless functions with fastAPI to work with some data science libraries, and I protect those fastAPIs with a simple x-shared-key headers with the above set up

Everything works smoothly, but in production, for some reason the trpc endpoint got 404 when the frontend's trying to query during production (not in dev)

I also noticed that the /api/auth endpoint was working
but the /api/trpc/[trpc] endpoint was showing a webpage with 404 as opposed to a api endpoint

this is my middleware.ts which doesn't seem to affect it as well

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"],
};


Maybe I got the routing incorrectly configured?
Thank you guys!
Was this page helpful?