Next.jsのミドルウェアでHonoを使用する

Next.js の Middleware で Hono を使う

Next.js Hono tech株式会社 CoeFont でフロントエンドエンジニアをしている uzimaru です。 Next.js の Middleware で Hono を使ってみたのでそれについて記事にまとめます。

Next.js の Middleware はアプリケーションに1つだけしか設定出来ず、どの path で実行するかの設定も config で行います。

シンプルな実装のみなら良いのですが、path によってログインしているか確認したい、いくつかの処理を Middleware で適応したい、というように要件が複雑になると管理が大変になっていくと思います。

そこで、Hono のようなシンプルなフレームワークを Middleware で動かして実装をシンプルにしようというのがモチベーションです。

Hono - [炎] means flame🔥 in Japanese - is a small, simple, and ultrafast web framework for the Edges. It works on any JavaScript runtime: Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js.

Honoは様々なランタイムで動作するWebフレームワークです。 より詳しくは、作者様の書いたこちらの記事を参照してください。

Middleware で Hono を動かしてみる

この Hono ですが Web標準API のみを利用して動いています。 また、Next.js の Middleware が受け取るシグネチャを見ると

type NextMiddleware = ( request: NextRequest, event: NextFetchEvent ) => NextMiddlewareResult | Promise<NextMiddlewareResult>;

という形になっています。 この NextRequest は Web標準の Request を拡張したものです。

NextMiddlewareResult は

export type NextMiddlewareResult = NextResponse | Response | null | undefined | void;

という型になっています。こちらもWeb標準ですね。

そのため、普通に Hono を使うだけでも十分動くということが分かったと思います。 最低限のコードは以下のようになります

import { Hono } from 'hono' import { NextRequest } from 'next/server' const app = new Hono() app.all('*', (ctx) => { return ctx.body(null) }) export const middleware = (req: NextRequest) => { return app.fetch(req) }

ただし、このコードでは想定している挙動はしてくれません。 見て分かるように、app.all で返している ctx.body(null) は null のボディを持つ Response を返してしまいます。

Middleware で Hono を使う

このままだとまともに使えないので使えるようにします。

NextResponse のドキュメントを見ると、AppRouterに処理を返すには NextResponse.next を返せば良いことが分かります。

import { Hono } from 'hono' import { NextRequest } from 'next/server' const app = new Hono() app.all('*', (ctx) => { return NextResponse.next() }) export const middleware = (req: NextRequest) => { return app.fetch(req) }

これで AppRouter に実装したページが表示されます。

処理を Middleware でまとめる

Middleware で実現した処理を Hono の Middleware として実装してまとめます。ちょっとややこしいですね。

今回は例として accept-language ヘッダーから言語を取得して cookie に保存する処理を実装してみます。

import { MiddlewareHandler } from 'hono' import { getCookie } from 'hono/cookie' import { NextRequest } from 'next/server' const i18nMiddleware: MiddlewareHandler = async (ctx, next) => { let locale = ctx.req.header('accept-language')?.split(',')[0]?.split('-')[0] if (locale !== 'en') { locale = 'ja' } if (!getCookie(ctx, 'LOCALE')) { const req = ctx.req.raw as NextRequest req.cookies.set('LOCALE', locale) } return next() }

書き方は一般的な Hono の Middleware と同じですが、いくつかポイントがあります。

Hono では ctx.req は HonoRequest という独自の型になっています。 NextRequest にアクセスするには ctx.req.raw を NextRequest にキャストする必要があります。

cookie に付いてですが、取得に関しては hono/cookie の getCookie が使えますが、設定は NextRequest の cookies を直接操作する必要があります。

NextResponse.next() に request オプションを渡すことで、変更した request を次の処理に渡すことができます。

Hono の Middleware を設定する

作成した Hono の Middleware を設定します。 今回は全部の path に対して有効にしたいので以下のように書きます。

const app = new Hono() app.use(i18nMiddleware)

しかし、この状態だと LOCALE を cookie に設定した request が次の処理に渡りません。 そのため、最後に request を渡す処理を追加する必要があります。

app.all('*', ctx => { const req = ctx.req.raw as NextRequest return NextResponse.next({ request: req }) })

これで Middleware で設定した cookie が反映されるようになりました。

Middleware の定義部分について

export const middleware = (req: NextRequest) => { return app.fetch(req) }

のように書いていましたが、実は hono/vercel に Next.js の Middleware 用のヘルパーが用意されています。

import { handle } from 'hono/vercel' export const middleware = handle(app)

Hono が Web標準API を使った実装になってくれているおかげで Next.js の Middleware で簡単に使うことができました。 基本的にはそのまま使えるのですが、Response 周りや cookie 周りがやや特殊だったのでそこだけ気をつける必要がありそうです。

Hono を使って書き換えたおかげで Middleware の見通しが良くなったのが良かったです。 Next.js の Middleware の書きにくさを感じている人は是非試してみてください。

CoeFontPublicationAI音声プラットフォーム「CoeFont（コエフォント）」の公式テックブログです。