ミドルウェア

ミドルウェアはハンドラーの前後で作動します。ディスパッチ前に`Request`を取得したり、ディスパッチ後に`Response`を操作できます。

ミドルウェアの定義

ハンドラー - `Response`オブジェクトを返す必要があります。呼び出されるハンドラーは1つだけです。
ミドルウェア - 何も返す必要はなく、`await next()`を使って次のミドルウェアに処理が渡されます。

ユーザーは`app.use`を使ってミドルウェアを登録できます。また、ハンドラーと同様に`app.HTTP_METHOD`も使用できます。この機能により、パスとメソッドを簡単に指定できます。

// match any method, all routes
app.use(logger())

// specify path
app.use('/posts/*', cors())

// specify method and path
app.post('/posts/*', basicAuth())

ハンドラーが`Response`を返した場合、エンドユーザーに使用され、処理が停止します。

app.post('/posts', (c) => c.text('Created!', 201))

この場合、以下のように4つのミドルウェアがディスパッチ前に処理されます。

logger() -> cors() -> basicAuth() -> *handler*

実行順序

ミドルウェアの実行順序は、登録された順序によって決定されます。最初に登録されたミドルウェアの`next`前の処理が最初に実行され、`next`後の処理が最後に実行されます。以下を参照してください。

app.use(async (_, next) => {
  console.log('middleware 1 start')
  await next()
  console.log('middleware 1 end')
})
app.use(async (_, next) => {
  console.log('middleware 2 start')
  await next()
  console.log('middleware 2 end')
})
app.use(async (_, next) => {
  console.log('middleware 3 start')
  await next()
  console.log('middleware 3 end')
})

app.get('/', (c) => {
  console.log('handler')
  return c.text('Hello!')
})

結果は次のようになります。

middleware 1 start
  middleware 2 start
    middleware 3 start
      handler
    middleware 3 end
  middleware 2 end
middleware 1 end

組み込みミドルウェア

Honoには組み込みミドルウェアがあります。

import { Hono } from 'hono'
import { poweredBy } from 'hono/powered-by'
import { logger } from 'hono/logger'
import { basicAuth } from 'hono/basic-auth'

const app = new Hono()

app.use(poweredBy())
app.use(logger())

app.use(
  '/auth/*',
  basicAuth({
    username: 'hono',
    password: 'acoolproject',
  })
)

警告

Denoでは、Honoのバージョンとは異なるバージョンのミドルウェアを使用できますが、バグにつながる可能性があります。たとえば、バージョンが異なるため、このコードは機能しません。

import { Hono } from 'jsr:@hono/hono@4.4.0'
import { upgradeWebSocket } from 'jsr:@hono/hono@4.4.5/deno'

const app = new Hono()

app.get(
  '/ws',
  upgradeWebSocket(() => ({
    // ...
  }))
)

カスタムミドルウェア

`app.use()`内で直接独自のミドルウェアを作成できます。

// Custom logger
app.use(async (c, next) => {
  console.log(`[${c.req.method}] ${c.req.url}`)
  await next()
})

// Add a custom header
app.use('/message/*', async (c, next) => {
  await next()
  c.header('x-message', 'This is middleware!')
})

app.get('/message/hello', (c) => c.text('Hello Middleware!'))

ただし、`app.use()`内にミドルウェアを直接埋め込むと、再利用性が制限される可能性があります。そのため、ミドルウェアを別々のファイルに分離できます。

ミドルウェアを分離する際に`context`と`next`の型定義を失わないように、Honoのファクトリーから`createMiddleware()`を使用できます。

import { createMiddleware } from 'hono/factory'

const logger = createMiddleware(async (c, next) => {
  console.log(`[${c.req.method}] ${c.req.url}`)
  await next()
})

情報

`createMiddleware`では型ジェネリクスを使用できます。

createMiddleware<{Bindings: Bindings}>(async (c, next) =>

Nextの後のResponseの変更

さらに、必要に応じてレスポンスを変更するようにミドルウェアを設計できます。

const stripRes = createMiddleware(async (c, next) => {
  await next()
  c.res = undefined
  c.res = new Response('New Response')
})