tRPC 404 in Next.js API Routes

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter } from "./trpc";

const handler = async (request: Request) => {
  return await fetchRequestHandler({
    endpoint: "/api/trpc",
    req: request,
    router: appRouter,
    onError: (opts) => {
      console.error(`[${opts.error.code}] ${opts.path}:`, opts.error);
    },
  });
};

export const GET = handler;
export const POST = handler;

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter } from "./trpc";

const handler = async (request: Request) => {
  return await fetchRequestHandler({
    endpoint: "/api/trpc",
    req: request,
    router: appRouter,
    onError: (opts) => {
      console.error(`[${opts.error.code}] ${opts.path}:`, opts.error);
    },
  });
};

export const GET = handler;
export const POST = handler;

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
export const appRouter = router({
  hello: publicProcedure.query(async () => {
    return "world";
  }),
});

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
export const appRouter = router({
  hello: publicProcedure.query(async () => {
    return "world";
  }),
});