CraftzCode Comments

CraftzCode

•Created by CraftzCode on 3/30/2025 in #❓-help

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

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?

21 replies

TtRPC

•Created by CraftzCode on 3/30/2025 in #❓-help

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

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?

21 replies

TtRPC

•Created by CraftzCode on 3/30/2025 in #❓-help

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

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,
});

21 replies

TtRPC

•Created by CraftzCode on 3/30/2025 in #❓-help

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

thank you so much 🥰

21 replies

TtRPC

•Created by CraftzCode on 3/30/2025 in #❓-help

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

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?

21 replies

TtRPC

•Created by CraftzCode on 3/30/2025 in #❓-help

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

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.

21 replies