How can I best replace Next.js Route Handlers with multiple APIs using Hono

[ve1997]

Hi!
I want to replace Route Handlers in Next.js with Hono.
I've written some code, but I'm not sure if this is handling Hono properly.

I often see examples where multiple endpoints are defined for a single "route" within "api/[[. .route]]/route.ts", as in the example below.

// app/api/[[...route]]/route.ts
import { zValidator } from "@hono/zod-validator";
import { Hono } from "hono";
import { handle } from "hono/vercel";
import { z } from "zod";

const app = new Hono().basePath("/api");

const route = app
	.get(
		"/",
		zValidator(
			"query",
			z.object({
				name: z.string(),
			}),
		),
		(c) => {
			const { name } = c.req.valid("query");
			return c.json({
				message: `Hi ${name}`,
			});
		},
	)
	.post(
		"/",
		zValidator(
			"json",
			z.object({
				text: z.string(),
			}),
		),
		(c) => {
			const { text } = c.req.valid("json");
			return c.json({
				message: `Hello ${text}`,
			});
		},
	);

export const GET = handle(app);
export const POST = handle(app);
export type AppType = typeof route;

I would like to write them as one file/one endpoint, etc. I would also like to know how to best export a single AppType in that case.

Finally, here is my current implementation
I'm also wondering if using useEffect to get the GET API in the Client Component is not optimal.
Would it be more appropriate to useSWR for GET requests similar to how useSWRMutation is used for POST requests?
If there is anything else I'm doing that is not optimal, please point it out.

// lib/hono.ts

import { hc } from "hono/client";
import type { AppType } from "@/app/api/[[...route]]/route";

// biome-ignore lint/style/noNonNullAssertion: <explanation>
export const client = hc<AppType>(process.env.NEXT_PUBLIC_APP_URL!);

// example of executing GET API in the client component
"use client";
import { client } from "@/app/lib/hono";
import type { InferResponseType } from "hono";
import { useEffect, useState } from "react";

type ResType = InferResponseType<typeof client.api.$get>;
export function GetExampleClientComponent() {
	const [data, setData] = useState<ResType | null>(null);
	useEffect(() => {
		client.api
			.$get({
				query: {
					name: "User",
				},
			})
			.then((res) => res.json())
			.then((json) => setData(json));
	}, []);
	return data && <div>{data.message}</div>;
}


// example of executing POST API in the client component
"use client";
import { client } from "@/app/lib/hono";
import { useState } from "react";
import useSWRMutation from "swr/mutation";

const postHello = async (_: string, { arg }: { arg: string }) => {
	const res = await client.api.$post({
		json: {
			text: arg,
		},
	});
	return await res.json();
};


export function PostExampleClientComponent() {
	const [value, setValue] = useState<string>("");
	const { trigger, isMutating, data } = useSWRMutation("hello", postHello);

	const handleClick = () => {
		trigger(value);
	};

	return (
		<div>
			<input
				type="text"
				value={value}
				onChange={(e) => setValue(e.target.value)}
			/>
			<button type="button" onClick={handleClick} disabled={isMutating}>
				{isMutating ? "Loading..." : "Click"}
			</button>
			{data?.message && <div>{data.message}</div>}
		</div>
	);
}


// example of executing GET API in the server component
import { client } from "@/app/lib/hono";
export async function GetExampleServerComponent() {
	const res = await client.api.$get({
		query: {
			name: "User",
		},
	});
	const json = await res.json();
	return <div>{json.message}</div>;
}


// example of executing POST API in the server component
import { client } from "@/app/lib/hono";
export async function PostExampleServerComponent() {
	const res = await client.api.$post({
		json: {
			text: "User",
		},
	});
	const json = await res.json();
	return <div>{json.message}</div>;
}

This may be a rudimentary question, but thank you in advance. Thanks for reading.

[EdamAme-x]

hi @ve1997.

I would like to write them as one file/one endpoint, etc. I would also like to know how to best export a single AppType in that case.

You can use the .route API. ref: https://hono.dev/snippets/grouping-routes-rpc

Finally, here is my current implementation
I'm also wondering if using useEffect to get the GET API in the Client Component is not optimal.
Would it be more appropriate to useSWR for GET requests similar to how useSWRMutation is used for POST requests?
If there is anything else I'm doing that is not optimal, please point it out.

same. It would be good to generate a fetcher from the Hono client, so that typesafe can also be realized.
ref: https://swr.vercel.app/ja/docs/typescript

[ve1997]

Hi @EdamAme-x Thankt for your reply.

You can use the .route API. ref: https://hono.dev/snippets/grouping-routes-rpc

Thanks to you I now know how to write using ".route".

same. It would be good to generate a fetcher from the Hono client, so that typesafe can also be realized.
ref: https://swr.vercel.app/ja/docs/typescript

I want to draw a generic fetcher that is type safe and has type data without type annotations.
I looked at the documentation but could not get it to work. Could you please provide some sample code for the above example using "fetcher" and "useSWR"?

[EdamAme-x]

hi @ve1997
hmm... If I replace the fetch part with client, does it not infer the type correctly?
https://zenn.dev/10q89s/articles/cloudflare-pages-with-hono

[ve1997]

hi @EdamAme-x

hmm... If I replace the fetch part with client, does it not infer the type correctly?
https://zenn.dev/10q89s/articles/cloudflare-pages-with-hono

What exactly do you mean by replacing the fetch part with client?
Sorry for my lack of skills.

It is expected that it is appropriate to pass the url obtained from the client as the first argument.
(This is because strings such as “/api/hello” will not work for completion.)
No conclusion can be drawn as to what to do with the second argument.
In the following implementation, the data is not typed.

const url = client.api.user.$url({ query: { name: "User" } });
const { data, error } = useSWR(url, (url) =>
	fetch(url).then((res) => res.json()),
);

[EdamAme-x]

Maybe

import useSWR, { Fetcher } from 'swr'

const url = client.api.user.$url({ query: { name: "User" } });
// AnyDataType can be generated from hono-client
// I think we can replace the fetch part of fetcher with hono-client.
const fetcher: Fetcher<AnyDataType, string> = (url) => fetch(url).then((res) => res.json())
const { data, error } = useSWR(url, fetcher);

by https://swr.vercel.app/ja/docs/typescript

[EdamAme-x]

I think it would work this way, but I think it would be smarter to use the fetcher function with a client to get the data.

// before
...
const url = client.api.user.$url({ query: { name: "User" } });
(url) => fetch(url).then((res) => res.json())
// after
...
() => client.api.user.$get({
  query: {
    name: "User"
  }
}).json()