Next.js で Basic 認証をかける

// middleware.ts

import { NextResponse, NextRequest } from 'next/server';

export const config = {
  // /hoge/ 以下のパスに対して Basic 認証をかける
  matcher: ['/hoge/:path*'],
}

export function middleware(req: NextRequest) {

  const basicAuth = req.headers.get('authorization');
  if (basicAuth) {
    const authValue = basicAuth.split(' ')[1];
    const [user, password] = atob(authValue).split(':');
    if (user === process.env.BASIC_AUTH_USER 
      && password === process.env.BASIC_AUTH_PASSWORD) {
      return NextResponse.next();
    }
  }

  return new NextResponse('Unauthorized', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"',
    },
  });
};

# .env.local

BASIC_AUTH_USER=foo
BASIC_AUTH_PASSWORD=bar

% npx next -v
Next.js v14.0.3