🤖

Next.jsのMiddleware(Basic認証)を触ってみた

1 min read

はじめに

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

前提

  • Next.js@12.xを使用していること
  • Next.jsをVercelにデプロイしていること

実際のコード

pages/_middleware.ts
import { NextRequest, NextResponse } from 'next/server'

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

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

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

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

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

このコードではpagesディレクトリ直下に_middleware.tsを配置しているので全てのページを開く前にMiddlewareが実行されます。
例えば、pages/hogeディレクトリ直下に_middleware.tsを配置した場合は/hoge、および/hoge/**/*のページを開く前にMiddlewareが実行されます。

おわりに

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

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

Discussion

ログインするとコメントできます