H
Hono•5w ago
craftzcode

Integrating Hono.js with tRPC in Next.js: Routing and Context Considerations

I want to combine Hono.js with tRPC. I followed the guide on the 3rd party middleware made by hono for a tRPC server, and now I have set up the hono tRPC server 3rd party middleware similar to the code below: 
import { Hono } from 'hono'
import { trpcServer } from '@hono/trpc-server' // Deno 'npm:@hono/trpc-server'
import { appRouter } from './router'

const app = new Hono()

app.use(
  '/trpc/*',
  trpcServer({
    router: appRouter,
  })
)

export default app
import { Hono } from 'hono'
import { trpcServer } from '@hono/trpc-server' // Deno 'npm:@hono/trpc-server'
import { appRouter } from './router'

const app = new Hono()

app.use(
  '/trpc/*',
  trpcServer({
    router: appRouter,
  })
)

export default app
I used Hono.js as a web server because I wanted to achieve the light and ultrafast web server capabilities of Hono.js. I got confused with the documentation for tRPC and Hono.js because, with tRPC, they also have their own API route setup in Next.js specifically, the route at src/app/api/trpc/[trpc]/route, and Hono.js also has its own API route setup in Next.js namely, the route at src/app/api/[[...route]]/route.ts. So, I don’t know which one I should follow to use the 3rd party library created by Hono.js, which is @hono/trpc-server. Now, where should I place this code in Next.js? Should it go in app/api/[[...route]]/route.ts or in app/api/trpc/[trpc]/route.ts? Also, what is the best approach regarding context—should I use the tRPC context or the Hono.js context?
1 Reply
Josh
Josh•4w ago
You should probably use some variant of app/api/[[...route]]/route.ts if you are planning to use additional endpoints other than tRPC. The app.use('/trpc/*') is going to be a catch all for the tRPC specific routes. As for the context, the middleware docs say that it puts the c.env on the tRPC ctx variable, so as long are you are inside a tRPC router you should just use ctx.

Did you find this page helpful?