/Knowledge/sources/honojs__hono/examples/nextjs-stack-pages-index-tsx--f65de111e0d0.md

Example: nextjs-stack/pages/index.tsx - hono-docs

Example: nextjs stack/pages/index.tsx Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://raw.githubusercontent.com/honojs/exampl...

Example: nextjs-stack/pages/index.tsx

Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://raw.githubusercontent.com/honojs/examples/main/nextjs-stack/pages/index.tsx

Summary

import { hc } from 'hono/client' import { useState } from 'react' import useSWRMutation from 'swr/mutation' import { AppType } from './api/[...route]' const client = hc ('/') const postHello = async (_: string, { arg }: { arg: string })...

Content

import { hc } from 'hono/client' import { useState } from 'react' import useSWRMutation from 'swr/mutation' import { AppType } from './api/[...route]'

const client = hc<AppType>('/')

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

export default function Home() { const { trigger, isMutating, data } = useSWRMutation('post-hello', postHello) const [name, setName] = useState('')

return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" /> <button type="button" onClick={() => trigger(name)} disabled={isMutating}> Send </button> <p>{data?.message}</p> </div> ) }

Metadata

{
  "chunk_index": 0,
  "citation": "https://raw.githubusercontent.com/honojs/examples/main/nextjs-stack/pages/index.tsx",
  "coverage_role": "examples",
  "qualified_title": "Hono / examples / nextjs-stack/pages/index.tsx",
  "repo_path": "nextjs-stack/pages/index.tsx",
  "retrieved_at": "2026-07-02T05:51:01Z",
  "section_index": 0,
  "source_id": "/honojs/hono",
  "source_type": "examples",
  "target_label": "examples",
  "title": "Example: nextjs-stack/pages/index.tsx",
  "upstream_url": "https://raw.githubusercontent.com/honojs/examples/main/nextjs-stack/pages/index.tsx",
  "version": "2026"
}