Next.js 12でbetaになったMiddleware（Basic認証）を触ってみた

はじめに

表題通り、Next.js 12でbetaになったMiddleware（Basic認証）を触ってみました。
といってもほぼ公式のExampleの通りなので備忘録程度の内容です。

環境

• Next.js@12
• Vercel

実際のコード

pages/hoge/_middleware.ts

import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'

export const middleware = (req: NextRequest) => {
  const authorizationHeader = req.headers.get('authorization')

  if (authorizationHeader) {
    const basicAuth = authorizationHeader.split(' ')[1]
    const [user, password] = Buffer.from(basicAuth, 'base64').toString().split(':')

    if (
      user === process.env.BASIC_AUTH_USER &&
      password === process.env.BASIC_AUTH_PASSWORD
    ) {
      return NextResponse.next()
    }
  }

  return new Response('Basic Auth required', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"',
    },
  })
}

公式のExampleとの差分としては、「ユーザー名、パスワードの管理に環境変数を使用する」ようにしている点です。
また、named exportの場合は関数名をmiddlewareにする必要があります。default exportの場合は関数名を任意の名前にすることが可能です。

このコードではpages/hogeディレクトリ直下に_middleware.tsを作成しているので/hoge/.*でMiddlewareが実行されます。
また、pagesディレクトリ直下に_middleware.tsを作成した場合は全てのページでMiddlewareが実行されるといったように、複数の_middleware.tsを作成することでMiddlewareをネストさせることができます。

おわりに

簡単ではありますが以上です。
以前まではNext.js + Vercelで簡単にBasic認証をする方法がなかったので個人的には嬉しい機能です。
また、Basic認証以外にもリダイレクトやA/Bテストなど様々なユースケースのExampleが載っているのでそちらも参考にしてみてください。

それではよいNext.jsライフを！