Next.jsのmiddlewareでbasic認証実装(React v18)

結構いろいろな記事が上がっているが、React v18だとmiddlewareが反応しないパターンが多かったため、メモ

結論api routesを使う

1. .envに環境変数を設定
2. middlewareを実装(プロジェクト全体に反映させる為には、pages配下ではなく、ルート配下に書く必要があるらしい、この辺はまりました、、、、)

middleware.ts

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

export const config = {
  matcher: ["/", "/index"]
};

export function middleware(req: NextRequest) {
  const basicAuth = req.headers.get("authorization");
  const url = req.nextUrl;

  if (basicAuth) {
    const authValue = basicAuth.split(" ")[1];
    const [user, pwd] = atob(authValue).split(":");

    if (user === process.env.BASIC_AUTH_USER && pwd === process.env.BASIC_AUTH_PASSWORD) {
      return NextResponse.next();
    }
  }
  url.pathname = "/api/auth";

  return NextResponse.rewrite(url);
}

3. api routesで受け取る

pages/api/auth.ts

import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(_: NextApiRequest, res: NextApiResponse) {
  res.setHeader("WWW-authenticate", 'Basic realm="Secure Area"');
  res.statusCode = 401;
  res.end(`Auth Required.`);
}

これでいける。