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

Now, where should I place this code in Next.js? Should it go in app/api/[[...route]]/route.tsapp/api/[[...route]]/route.ts or in app/api/trpc/[trpc]/route.tsapp/api/trpc/[trpc]/route.ts?

Also, what is the best approach regarding context—should I use the tRPC context or the Hono.js context?

Solution

Option 1. N -> H -> T (this is to use src/app/api/[[...route] src/app/api/[[...route]) as the example below

Option 2. N -> T - You use the tprc adapter for nextjs directly and src/app/api/trpc/[trpc]/routesrc/app/api/trpc/[trpc]/route

I think you might missunderstanding what's the purpose goal of HonoJS, vs nextjs api/server and how they interact with TRPC

Jump to solution

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

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

Solution

Jump to solution

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

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

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads