Hono × Next.js 15未経験チームがAI面接システムを構築！ #TypeScript

Vercelを初めて使用した弊社にとって、非常に良い体験でした。日本ではスタートアップなどでない限り、Vercelの採用事例は少ないかもしれませんが、そのメリットは非常に大きかったです。

具体的には、Next.jsとの高い親和性や、デプロイの簡便さによってUX・DXの向上が実現できたことに加え、以下の点が特に大きなメリットとして感じられました：
• インフラ管理コストがほぼゼロになる（インフラエンジニアが不要）
• Fluid Computeを活用したUXとコスト最適化（規模が大きくなるほど効果的）

まず、インフラエンジニアを採用せずとも、Vercelを使えば簡単にホスティングが可能であることを、チーム全体で体感しました。これは、長期的な目線ではかなり有効性を感じました。インフラエンジニアの工数やコストは非常に大きいものなので、Vercelなどhosting serviceを使えるようなプロジェクトであれば、今後も積極活用したいと本プロジェクトの発起人は述べています。

※「インフラエンジニアが不要」というのは、Vercelやその他のホスティングサービスを利用できる前提で、インフラエンジニアを専任で採用する必要がない、という意味です。

さらに、Auto ScalingやFluid Computeといったサーバーレス機能を、Vercelの管理画面から簡単に有効化できる点も大きな利点です。これにより、システムのスケーリングやコストの最適化が手軽に実現できました。

Fluid Computeは一言でいうと、server lessとedge computingの良いところどりをしたような次世代のアーキテクチャです。
より詳細は以下をご参照ください。

また、Vercel Marketplaceを用いた開発体験も良好でした。

Vercel Marketplaceは、Vercelのダッシュボードからサードパーティのサービスを検索、導入、管理できるサービスです。

今回はsession storageとしてRedisを採用したのですが、GUI上から簡単に導入でき、コスト面でも、アプリケーションの規模に合わせてスケーリングが容易な仕様であることが魅力的でした。

Hono RPCの活用

type ResType = InferResponseType
    (typeof client.api.interview)['result']['$post']
>
  

const url = client.api.interview.result.$url()

const res = await fetcherResType>(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ messages }),
})

const app = new Hono().use('*', rateLimitMiddleware).basePath('/api')

export const getSession = async (sessionId?: string) => {
  'use cache'
  
  // Redisからのセッションデータ取得ロジック
}

const ResultPage = async () => {
  const sessionPromise = fetchSession()

  return (
    Suspense>
      ShareButton sessionPromise={sessionPromise} />
    Suspense>
  )
}

------

'use client'
import { use } from 'react'

export const ShareButton = ({ sessionPromise }: ShareButtonProps) => {
  const session = use(sessionPromise)