Expo Routerに新しく追加されたAPI Routesをhonoで使うサンプル

Expo SDK

Expo SDKは、React Nativeにおけるアプリケーション開発の生産性を圧倒的にブーストできるツールです。
今回はそのExpo SDKのバージョン５０が正式されました。

https://expo.dev/changelog/2024/01-18-sdk-50

そこに合わせて、Expo Router v3もリリースされ、ここに今回の目玉、API Routesが追加されました。
https://expo.dev/changelog/2024/01-23-router-3

API Routesとは？

Nextjsにも同名の機能があるのでご存じの方も多いかもしれませんが、サーバーサイドのAPI実装をアプリケーションフォルダ内で実装し、公開できる機能です。

import { ExpoRequest, ExpoResponse } from 'expo-router/server';

export function GET() {
  return ExpoResponse.json({ hello: 'world' });
}

export function POST(request: ExpoRequest) {
  const { prompt } = await request.json();

  // Do something with the prompt
  return ExpoResponse.json({
    /* ... */
  });
}

APIのファイルにこのように定義してあげるだけで、簡単にAPIがはやせます。

利用するには、Expo SDKの最新版が入ったプロジェクトのapp.jsonを変更し、+apiと名前のつくファイルを置くだけです。詳細は公式ページが詳しいです。（デプロイの話も載ってます）
https://docs.expo.dev/router/reference/api-routes/

何が嬉しいの？

Expoのフォルダ内でサーバーの実装もできるということで、Expoがいよいよフルスタックアプリケーションフレームワークへと進化しはじめました。

サーバーサイドのフレームワークを使うには？

ところが、今までHonoなどのAPIフレームワークを使っていた人にとっては馴染みのない書き方になってると思います。

ファイルベースドルーティングの考え方なので、ファイルごとにAPIを定義するのがあるべき姿なのかもしれませんが、なるべく今までの書き方も書ければ嬉しいですよね。

ということで今回はHonowつかったサンプルを書いてみました。

import { Hono } from "hono";

const hono = new Hono()
	.basePath("/api")
	.get("/", (c) => c.text("Hi from hono"))
	.post("/", (c) => c.json({ hello: "world" }));

export const GET = hono.fetch;
export const POST = hono.fetch;

こんな感じで利用すれば、簡単に今までのフレームワークも利用できます。ぜひ使ってみてください。