Hono RPCモード完全ガイド — コード生成不要で実現する型安全フルスタック開発【2026年版】

import { Hono } from 'hono'
import { zValidator } from '@hono/zod-validator'
import { z } from 'zod'

const app = new Hono()
const route = app.post(
  '/posts',
  zValidator('json', z.object({
    title: z.string().min(1),
    body: z.string()
  })),
  (c) => {
    const data = c.req.valid('json')
    return c.json({ ok: true, id: 1, ...data }, 201)
  }
)
export type AppType = typeof route
export default app

import type { AppType } from './server'
import { hc } from 'hono/client'

const client = hc<AppType>('http://localhost:8787/')
const res = await client.posts.$post({
  json: { title: 'Hello', body: 'Hono RPC is great!' }
})
if (res.ok) {
  const data = await res.json()
  // data: { ok: true, id: number, title: string, body: string }
}

import { InferRequestType, InferResponseType } from 'hono/client'
import type { AppType } from './server'
import { hc } from 'hono/client'

const client = hc<AppType>('/')
type CreatePostInput = InferRequestType<typeof client.posts.$post>['json']
// => { title: string; body: string }

type CreatePostOutput = InferResponseType<typeof client.posts.$post, 201>
// => { ok: boolean; id: number; title: string; body: string }

const url = client.posts.$url()
// => URL { href: 'http://localhost:8787/posts' }

const path = client.posts.$path()
// => '/posts'

// パスパラメータがある場合
const postUrl = client.posts[':id'].$url({ param: { id: '42' } })
// => URL { href: 'http://localhost:8787/posts/42' }

// routes/posts.ts
const postsRoute = new Hono()
  .get('/', (c) => c.json({ posts: [] }))
  .post('/', zValidator('json', postSchema), (c) => {
    return c.json({ ok: true }, 201)
  })
export type PostsType = typeof postsRoute

// routes/users.ts
const usersRoute = new Hono()
  .get('/:id', (c) => c.json({ user: { id: c.req.param('id') } }))
export type UsersType = typeof usersRoute

// app.ts
const app = new Hono()
  .route('/posts', postsRoute)
  .route('/users', usersRoute)
export type AppType = typeof app
export default app

// lib/client.ts (Next.js)
import { hc } from 'hono/client'
import type { AppType } from '@/server/app'

export const client = hc<AppType>(process.env.NEXT_PUBLIC_API_URL!)

// app/posts/page.tsx (Server Component)
import { client } from '@/lib/client'

export default async function PostsPage() {
  const res = await client.posts.$get()
  const { posts } = await res.json()
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
}

import { HTTPException } from 'hono/http-exception'

const route = app
  .get('/posts/:id', async (c) => {
    const post = await db.find(c.req.param('id'))
    if (!post) throw new HTTPException(404, { message: 'Not Found' })
    return c.json({ post }, 200)
  })

// グローバルエラーハンドラー
app.onError((err, c) => {
  if (err instanceof HTTPException) {
    return err.getResponse()
  }
  return c.json({ error: 'Internal Server Error' }, 500)
})