CraftzCode•3d ago

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.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?

Solution:

Option 1. N -> H -> T (this is to use 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]/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

10 Replies

lukas•3d ago

So it all depends, you are using HONO on top of nextjs - and trpc on top of hono. So USER -> Next api -> HONO -> trpc. Why you are using HONO with next? IMHO you should do it only if considering moving to something else or having consistency. If you decide to keep using HONO it should be on app[[..route]] otherwise if using next directly on api trpc and so on.

CraftzCodeOP•2d ago

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.

lukas•2d ago

@CraftzCode with next you dont need hono. NextJS is serverless, offer a serverless api with get/post/put out of the box. You don't need hono to run trpc on next. Hono is a abstraction on top of nextjs If you decide to keep using honojs, you will need to use src/app/api/[[...route]]/route.ts FRONTEND -> VERCEL -> HONO -> NEXTJS. You will need to have something like this

import { handle } from "hono/vercel";

  const app = new Hono();

 app.use(
    "/api/trpc/*",

    trpcServer({
      endpoint: "/api/trpc",
}));



export const GET = handle(app);
export const POST = handle(app);

import { handle } from "hono/vercel";

  const app = new Hono();

 app.use(
    "/api/trpc/*",

    trpcServer({
      endpoint: "/api/trpc",
}));



export const GET = handle(app);
export const POST = handle(app);

Hono has a TRPC adapter Next has TRPC adapter Hono has a next adapter.

Solution

lukas•2d ago

CraftzCodeOP•2d ago

thank you so much for the help 🙂 it a huge fore me, I've been waiting for a 2 days to answer my questions in discussion on the github both tRPC and hono, I also posted to in stackoverflow but no one can help me. I find tech stack template in github for this combination but it used the tanstack-start instead of next so I tried it on next I will consider it to remove the hono but for now I will keep it for my reference/template for this kind of tech stack combination. One last question if you don't mind, what is the best approach regarding context—should I use the tRPC context or the Hono.js context?

lukas•2d ago

trpc !== hono. Think like this NEXT (serverless api - running on custom runtime, similar as AWS Lambda but with fluid computing) HONO TRPC 1. Trpc context is something that is available through all the procedures, usually helpful to add auth information. 2. On every request you can build a trpc context object, e.g extracting a token from the request header and decoding into an user id, or looking up an user in the db, etc. 3. Hono context is something that is available only inside hono get and post and can be passed to TRPC context as well. HONO - get post - hono context can be acessed during this TPRC procedures that receive the TRPC context. I suggest you reading the full docs and understanding the core difference between those.

CraftzCodeOP•2d ago

thank you so much 🥰

CraftzCodeOP•17h ago

sir @lukas if I used hono as trpc adapter inside of next.js api route, do I still need to setup this tRPC Caller for Server Components ?

import 'server-only'; // <-- ensure this file cannot be imported from the client
import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
import { cache } from 'react';
import { createTRPCContext } from './init';
import { makeQueryClient } from './query-client';
import { appRouter } from './routers/_app';
// IMPORTANT: Create a stable getter for the query client that
//            will return the same client during the same request.
export const getQueryClient = cache(makeQueryClient);
export const trpc = createTRPCOptionsProxy({
  ctx: createTRPCContext,
  router: appRouter,
  queryClient: getQueryClient,
});
// If your router is on a separate server, pass a client:
createTRPCOptionsProxy({
  client: createTRPCClient({
    links: [httpLink({ url: '...' })],
  }),
  queryClient: getQueryClient,
});

import 'server-only'; // <-- ensure this file cannot be imported from the client
import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
import { cache } from 'react';
import { createTRPCContext } from './init';
import { makeQueryClient } from './query-client';
import { appRouter } from './routers/_app';
// IMPORTANT: Create a stable getter for the query client that
//            will return the same client during the same request.
export const getQueryClient = cache(makeQueryClient);
export const trpc = createTRPCOptionsProxy({
  ctx: createTRPCContext,
  router: appRouter,
  queryClient: getQueryClient,
});
// If your router is on a separate server, pass a client:
createTRPCOptionsProxy({
  client: createTRPCClient({
    links: [httpLink({ url: '...' })],
  }),
  queryClient: getQueryClient,
});

lukas•17h ago

not too sure if this would work. Trpc client is a different thign from the servcer, is how you consume data. In order to use it in both client and server you need to do tricks and configurations, personally I just use trpc at the client and don't mess with server side, etc. But it should work. 🙂

CraftzCodeOP•15h ago

Well, if I were to use Hono as a server, I wouldn't need to use Next.js' server component, because what would be the point of the Hono server if I also use Next.js' server component am I correct sir? So the best option is to not use Hono.js as an adapter/server, so that the prefetch from the server component to the client component—explained by Sir Code with Antonio in his YouTube clone—can be fully utilized. Or is it still possible to use prefetch while using Hono as an adapter/server?

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

Did you find this page helpful?