【Next.js】Next.js 12.2.0でBasic認証を実装する

Next.jsはMiddlewareを使用すればBasic認証を実装できます。

ただ、Next.js 12.2.0からMiddlewareが安定版になり、仕様が大きく変わりました。

Middleware Upgrade Guide

Basic認証も12.2.0以前のやり方ではできなくなっており、いろいろ調べたら何とかできる方法があったので備忘録です。

ディレクトリ構成

・pages/api/auth.ts
・pages/index.tsx
・middleware.ts

auth.ts

Next.jsのREST APIを使用します。

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.`)
}

middleware.ts

Next.js 12.2.0以前ではpages配下に「_middleware.ts」を配置して複数配置できましたが、、pagesディレクトリと同階層に1つだけ配置する仕様になりました。

さらに「_middleware.ts」のファイル名のプレフィックスの _（アンスコ）がなくなりました。

import { NextRequest, NextResponse } from 'next/server'
export const config = { matcher: '/',
}
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 === 'admin' && pwd === 'password123') { return NextResponse.next() } } url.pathname = '/api/auth' return NextResponse.rewrite(url)
}

ちなみに上記の例ではパスワードをハードコーディングしていますが、実際には.env.productionとか設定ファイルから取得する感じになると思います。

また、matcherの部分を変更すれば、例えば管理画面だけなど特定のpath配下だけBasic認証をかけることも可能です。

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村