Hono.js: O Framework Web Mais Rápido que Você Provavelmente Ainda Não Usa

# Para Node.jsnpm create hono@latest meu-app# Selecione: nodejs# Para Cloudflare Workersnpm create cloudflare@latest meu-app -- --template=hono# Para Bunbun create hono meu-app

import { Hono } from 'hono'const app = new Hono()app.get('/', (c) => c.text('Hono!'))app.get('/json', (c) => c.json({ message: 'olá' }))app.post('/echo', async (c) => {  const body = await c.req.json()  return c.json(body)})export default app

import { Hono } from 'hono'const app = new Hono()// Parâmetros de rotaapp.get('/posts/:id', (c) => {  const id = c.req.param('id')  return c.json({ id })})// Query stringsapp.get('/search', (c) => {  const q = c.req.query('q')  const page = c.req.query('page') ?? '1'  return c.json({ q, page })})// Agrupamento com basePathconst api = new Hono().basePath('/api')// Sub-routers por recursoconst users = new Hono()users.get('/', (c) => c.json([]))users.post('/', async (c) => {  const body = await c.req.json()  return c.json(body, 201)})users.get('/:id', (c) => c.json({ id: c.req.param('id') }))// Montar no app principalapi.route('/users', users)export default api

import { Hono } from 'hono'import { cors } from 'hono/cors'import { logger } from 'hono/logger'import { bearerAuth } from 'hono/bearer-auth'import { cache } from 'hono/cache'const app = new Hono()// Middleware globalapp.use('*', logger())app.use('*', cors({  origin: ['https://meusite.com', 'http://localhost:3000'],  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],}))// Middleware por rotaconst token = 'meu-token-secreto'app.use('/admin/*', bearerAuth({ token }))// Cache em Cloudflare Workersapp.use('/static/*', cache({  cacheName: 'static-assets',  cacheControl: 'max-age=3600',}))// Middleware customizadoapp.use('*', async (c, next) => {  const start = Date.now()  await next()  const ms = Date.now() - start  c.header('X-Response-Time', `${ms}ms`)})app.get('/', (c) => c.text('OK'))export default app

import { Hono } from 'hono'import { z } from 'zod'import { zValidator } from '@hono/zod-validator'const app = new Hono()// Schema de criação de usuárioconst criarUsuarioSchema = z.object({  nome: z.string().min(2).max(100),  email: z.string().email(),  idade: z.number().int().min(18).optional(),})// Schema de query paramsconst paginacaoSchema = z.object({  pagina: z.coerce.number().int().positive().default(1),  limite: z.coerce.number().int().min(1).max(100).default(20),})app.post(  '/users',  zValidator('json', criarUsuarioSchema),  (c) => {    const { nome, email, idade } = c.req.valid('json')    // nome, email, idade são totalmente tipados aqui    // TypeScript sabe exatamente o que são    return c.json({ id: 1, nome, email, idade }, 201)  })app.get(  '/users',  zValidator('query', paginacaoSchema),  (c) => {    const { pagina, limite } = c.req.valid('query')    // pagina e limite já são numbers, não strings    return c.json({ pagina, limite, total: 0, dados: [] })  })export default app

// server.ts — exporta o tipo das rotasimport { Hono } from 'hono'import { z } from 'zod'import { zValidator } from '@hono/zod-validator'const app = new Hono()const route = app  .get('/api/posts', (c) => c.json([{ id: 1, titulo: 'Olá' }]))  .post(    '/api/posts',    zValidator('json', z.object({ titulo: z.string() })),    async (c) => {      const { titulo } = c.req.valid('json')      return c.json({ id: 2, titulo }, 201)    }  )export type AppType = typeof routeexport default app

// client.ts — frontend com type safety completoimport { hc } from 'hono/client'import type { AppType } from './server'const client = hc<AppType>('http://localhost:8787')// TypeScript sabe o tipo de retorno de cada rotaconst posts = await client.api.posts.$get()const data = await posts.json()// data é tipado como { id: number; titulo: string }[]// Erros de compilação se o payload estiver erradoconst novo = await client.api.posts.$post({  json: { titulo: 'Novo Post' }, // TypeScript valida aqui})

// app.tsximport { Hono } from 'hono'import type { FC } from 'hono/jsx'const app = new Hono()const Layout: FC = ({ children }) => (  <html lang="pt-BR">    <head>      <meta charset="UTF-8" />      <title>Meu Site</title>    </head>    <body>{children}</body>  </html>)const PostCard: FC<{ titulo: string; resumo: string }> = ({ titulo, resumo }) => (  <article>    <h2>{titulo}</h2>    <p>{resumo}</p>  </article>)app.get('/posts', (c) => {  const posts = [    { titulo: 'Post 1', resumo: 'Resumo 1' },    { titulo: 'Post 2', resumo: 'Resumo 2' },  ]  return c.html(    <Layout>      <h1>Blog</h1>      {posts.map((p) => <PostCard {...p} />)}    </Layout>  )})export default app