Hono × Inertia（@hono/inertia）で API とクライアントルーターなしの React SPA を書く

// src/server.tsx（Hono）
app.get('/posts', (c) => c.render('Posts/Index', { posts: listPosts() }))
app.get('/posts/:id{[0-9]+}', (c) => {
  const post = findPost(Number(c.req.param('id')))
  if (!post) return c.notFound()
  return c.render('Posts/Show', { post })
})

// app/pages/Posts/Show.tsx（React）
export default function Show({ post }: PageProps<'Posts/Show'>) {
  return <article><h1>{post.title}</h1><p>{post.body}</p></article>
}

export const postInputSchema = z.object({
  title: z.string().min(1, 'タイトルは必須です').max(80, 'タイトルは80文字以内で入力してください'),
  body: z.string().min(1, '本文は必須です').max(2000),
})
export type PostInput = z.infer<typeof postInputSchema>   // ① 型

app.post('/posts',
  zValidator('json', postInputSchema, (result, c) => {     // ② 実行時チェック
    if (!result.success) {
      // 422 を返すのではなく、同じフォームを入力値とエラー付きで描き直す
      return c.render('Posts/New', {
        values: recoverInput(result.data),
        errors: toFieldErrors(result.error),               // ③ エラー文言がそのまま props に
      })
    }
  }),
  (c) => {
    const post = createPost(c.req.valid('json'))
    return c.redirect(`/posts/${post.id}`, 303)
  },
)