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;

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

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!

1 Reply

Yiz•9mo ago

@01!^3r did you make any progress with that? We are having exactly the same problem.

Gaming

Programming

TRPC works in local but got 404 in production