Next.jsでベーシック認証をかける

Vercelが公開しているサンプルをベースに、微調整を加える。

まず、pages配下に_middleware.jsを作る。

cd pages
touch _middleware.js

TypeScriptを使っている場合は、冒頭のサンプルをそのまま流用すれば良い。
わたしの場合は、TypeScriptを使っていなかったため、型チェックの記述を削除する等、適宜調整を加えた。

_middleware.js

import { NextResponse } from 'next/server'

export function middleware(req) {
  const basicAuth = req.headers.get('authorization')

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

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

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

続いて、ユーザー名、パスワードを設定する。ルートディレクトリにて、.env.local を作る。

touch .env.local

環境変数を記述。

.env.local

BASIC_AUTH_USER='user'
BASIC_AUTH_PASSWORD='passowrd'

おそらくデフォルトで記載されているはずだが、もし.gitignoreに記載されていなければ記載しておく。

.gitignore

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

以上で、ベーシック認証がかかる。
Vercelにデプロイする際は、Vercelの管理画面側で、環境変数を適宜設定する。

1. Vercelの該当プロジェクトに移動
2. Settingをクリック
3. Environment Variables から、それぞれNAME VALUEを追加。

これでVercel側にもベーシック認証がかかる。

わたしの場合、上記の_middleware.jsを追加してVercelにデプロイした際、以下のエラーが出て失敗した。

./pages/_middleware.js
Module not found: Can't resolve 'buffer' in '/vercel/path0/pages'

bufferというモジュールがないと言われているので、素直に追加。
bufferは、バイナリデータを扱うために必要になる。

npm install buffer

package.jsonとpackage-lock.jsonが変更される。これを踏まえて再デプロイしたところ、今度は成功した。