Next.js + Hono + Supabase

Django
  ├── フルスタック（ORM・認証・管理画面・テンプレートエンジン込み）
  ├── 「全部入り」の安心感
  └── 起動・レスポンスは比較的重め

Hono
  ├── ルーティングとミドルウェアに集中した「薄い」フレームワーク
  ├── ORMや認証は自分で選んで組み合わせる
  └── とにかく速い・軽い

// Express.js
import express from 'express'
const app = express()

app.get('/hello', (req, res) => {
  res.json({ message: 'Hello!' })
})
app.listen(3000)

// Hono（ほぼ同じ感覚で書ける）
import { Hono } from 'hono'
const app = new Hono()

app.get('/hello', (c) => {
  return c.json({ message: 'Hello!' })
})

export default app  // どの環境でもそのまま動く

import { Hono } from 'hono'

const app = new Hono()

// 基本的なHTTPメソッド
app.get('/users',     (c) => c.json({ users: [] }))
app.post('/users',    (c) => c.json({ created: true }, 201))
app.put('/users/:id', (c) => c.json({ updated: true }))
app.delete('/users/:id', (c) => c.json({ deleted: true }))

// URLパラメータ
app.get('/users/:id', (c) => {
  const id = c.req.param('id')
  return c.json({ id })
})

// クエリパラメータ (?page=1&limit=10)
app.get('/posts', (c) => {
  const page  = c.req.query('page')
  const limit = c.req.query('limit')
  return c.json({ page, limit })
})

// routes/users.ts
export const usersRoute = new Hono()
  .get('/',    (c) => c.json({ users: [] }))
  .post('/',   (c) => c.json({ created: true }, 201))
  .get('/:id', (c) => c.json({ id: c.req.param('id') }))

// server/index.ts
const app = new Hono()
  .route('/users', usersRoute)
  .route('/posts', postsRoute)

export default app

import { logger }     from 'hono/logger'
import { cors }       from 'hono/cors'

const app = new Hono()

// 全ルートに適用
app.use('*', logger())
app.use('*', cors({ origin: 'http://localhost:3000' }))

// 自作ミドルウェア（レスポンス時間計測）
app.use('*', async (c, next) => {
  const start = Date.now()
  await next()
  const ms = Date.now() - start
  c.header('X-Response-Time', `${ms}ms`)
})

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

const createUserSchema = z.object({
  name:  z.string().min(1, '名前は必須です'),
  email: z.string().email('メール形式が不正です'),
  age:   z.number().min(0).max(150).optional(),
})

app.post(
  '/users',
  zValidator('json', createUserSchema),
  async (c) => {
    const { name, email, age } = c.req.valid('json')
    //      ← バリデーション済み・型が自動でつく！

    const user = await createUser({ name, email, age })
    return c.json({ user }, 201)
  }
)

my-app/
├── app/
│   ├── api/
│   │   └── [[...route]]/
│   │       └── route.ts    ← Honoの入口（キャッチオールルート）
│   ├── page.tsx
│   └── layout.tsx
├── server/
│   ├── index.ts            ← Honoアプリ本体・AppTypeエクスポート
│   └── routes/
│       ├── users.ts
│       ├── posts.ts
│       └── auth.ts
├── lib/
│   ├── supabase.ts         ← Supabaseクライアント
│   └── client.ts           ← hono/clientセットアップ
└── package.json

// app/api/[[...route]]/route.ts
import { handle } from 'hono/vercel'
import app from '@/server/index'

export const GET    = handle(app)
export const POST   = handle(app)
export const PUT    = handle(app)
export const DELETE = handle(app)

// server/index.ts
import { Hono } from 'hono'
import { usersRoute } from './routes/users'
import { postsRoute } from './routes/posts'
import { authRoute  } from './routes/auth'

const app = new Hono().basePath('/api')
  .route('/users', usersRoute)
  .route('/posts', postsRoute)
  .route('/auth',  authRoute)

export default app
export type AppType = typeof app  // ← hono/clientの型推論に必須！

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!  // サーバー側はservice_role_key
)

anon key（公開可）
  └── フロント（ブラウザ）で使う
  └── RLSが適用される
  └── NEXT_PUBLIC_ プレフィックスOK

service_role_key（絶対に公開しない）
  └── サーバー（Hono）で使う
  └── RLSをバイパスして全データにアクセス
  └── NEXT_PUBLIC_ は絶対につけない！

// server/middleware/auth.ts
import { createMiddleware } from 'hono/factory'
import { createClient } from '@supabase/supabase-js'

type Variables = {
  userId: string
  userEmail: string
}

export const authMiddleware = createMiddleware<{ Variables: Variables }>(
  async (c, next) => {
    const authHeader = c.req.header('Authorization')
    if (!authHeader?.startsWith('Bearer ')) {
      return c.json({ error: '認証が必要です' }, 401)
    }

    const token = authHeader.replace('Bearer ', '')
    const supabase = createClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
    )

    const { data: { user }, error } = await supabase.auth.getUser(token)
    if (error || !user) {
      return c.json({ error: 'トークンが無効です' }, 401)
    }

    // Djangoの request.user に相当
    c.set('userId',    user.id)
    c.set('userEmail', user.email ?? '')
    await next()
  }
)

export const postsRoute = new Hono()

  // 認証不要（公開API）
  .get('/', async (c) => {
    const { data } = await supabase.from('posts').select('*')
    return c.json({ posts: data })
  })

  // 認証必要
  .post('/', authMiddleware, zValidator('json', z.object({
    title:   z.string().min(1),
    content: z.string().min(1),
  })), async (c) => {
    const userId = c.get('userId')  // ミドルウェアでセットした値
    const body   = c.req.valid('json')

    const { data, error } = await supabase
      .from('posts')
      .insert({ ...body, user_id: userId })
      .select()
      .single()

    if (error) return c.json({ error: error.message }, 500)
    return c.json({ post: data }, 201)
  })

// lib/client.ts
import { hc } from 'hono/client'
import type { AppType } from '@/server/index'

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

Zodスキーマ（server/routes/*.ts）
  │ 型が伝播
  ▼
AppType（server/index.ts）
  │ hc<AppType>で渡す
  ▼
client（lib/client.ts）
  │ 補完・型チェックが効く
  ▼
Next.jsコンポーネント

// app/posts/page.tsx
import { client } from '@/lib/client'

export default async function PostsPage() {
  const res = await client.api.posts.$get()
  const { posts } = await res.json()
  // posts は Post[] 型が自動でつく！

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

'use client'
import { client } from '@/lib/client'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'

export default function NewPostPage() {
  const supabase = createClientComponentClient()

  const handleSubmit = async () => {
    const { data: { session } } = await supabase.auth.getSession()
    const token = session?.access_token

    const res = await client.api.posts.$post(
      { json: { title, content } },
      { headers: { Authorization: `Bearer ${token}` } }
    )

    if (res.ok) {
      const { post } = await res.json()
      console.log('作成成功:', post.title)  // 型付き！
    }
  }
  // ...
}

npm i -g vercel
vercel deploy

# 環境変数（Vercelダッシュボードで設定）
NEXT_PUBLIC_SUPABASE_URL       = https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY  = eyJxxx
SUPABASE_SERVICE_ROLE_KEY      = eyJxxx  ← NEXT_PUBLIC_なし！

// server/node.ts（ECS用エントリーポイント）
import { serve } from '@hono/node-server'
import app from './index'

serve({ fetch: app.fetch, port: 3001 }, (info) => {
  console.log(`Server running on port ${info.port}`)
})