Next.js Discord

Discord Forum

Next not working with TRPC

Unanswered
American Crocodile posted this in #help-forum
Open in Discord
American CrocodileOP
"When I make a request to the route configured by TRPC /api/trpc/[trpc], it is returning the default Nextjs 404 page as if it were considering that route as a page.

// app/api/trpc/[trpc]/route.ts
import { appRouter } from "@/server/routers/_app";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { createContext } from "@/server/context";

function handler(request: Request) {
  return fetchRequestHandler({
    endpoint: "/api/trpc",
    req: request,
    router: appRouter,
    createContext,
  });
}

export { handler as GET, handler as POST };


The error occurs exclusively for this route because all other pages work, and other API Routes also work, including the TRPCClient, which makes the request, but there is an issue with parsing the response: TRPCClientError: Unexpected token < in JSON at position 0 because the response is HTML (404 Page Not Found) and not JSON.

What could be happening?"

# Next Info
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:53:44 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T8103
Binaries:
  Node: 18.14.2
  npm: 9.5.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 13.5.5-canary.0
  eslint-config-next: 13.4.19
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

3 Replies

American CrocodileOP
House Finch
not sure @American Crocodile , your setup looks ok to me. FWIW, I have been following this tutorial https://www.youtube.com/watch?v=qCLV0Iaq9zU and this code example https://github.com/jherr/trpc-on-the-app-router/tree/main it's working for a simple case
House Finch
do you have anything odd in your next config file that might affect resolution like pageExtensions, redirects, rewrites?