ディレクトリ構成・pages/api/auth.ts ・pages/index.tsx ・middleware.ts auth.tsNext.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.tsNext.js 12.2.0以