Nextjs 13 App routerでBasic認証かける方法

開発中にとりあえずかけときたい場面あるはず

前はこれでいけた。でもApp routerに変わって色々書き方変わったぽい？
https://vercel.com/templates/next.js/basic-auth-password

結論

これで動いた。

middleware.ts

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

/**
 * @see https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
 */
export const config = {
  matcher: ['/:path*', '/index/:path*'],
};

export function middleware(req: NextRequest) {
  const basicAuth = req.headers.get('Authorization');

  if (basicAuth) {
    const authValue = basicAuth.split(' ')[1];
    // atob is deprecated but Buffer.from is not available in Next.js edge.
    const [user, password] = atob(authValue).split(':');

    if (user === '4dmin' && password === 'pwd123') {
      return NextResponse.next();
    }

    return NextResponse.json(
      { error: 'Invalid credentials' },
      { headers: { 'WWW-Authenticate': 'Basic realm="Secure Area"' }, status: 401 }
    );
  } else {
    return NextResponse.json(
      { error: 'Please enter credentials' },
      { headers: { 'WWW-Authenticate': 'Basic realm="Secure Area"' }, status: 401 }
    );
  }
}

注意点

middleware.tsの配置は、appディレクトリと同階層に配置する必要がある。srcディレクトリ使ってるならその下ってことね

参考

https://github.com/vercel/next.js/issues/48083#issuecomment-1507158697