WIP: vercelのmiddlewareを使ったベーシック認証（next.js 12系）

vercelのベーシック認証をmiddlewareを使って仕掛ける。満たしたい要件は、、、

• vercel側だけで掛けて、ローカルの開発環境では掛けない
• 認証情報はどこにも出さない

TL;DR

• ローカルのテストは .env.local に書く
• next.jsのバージョンは12系の最新にしておく（stableなのが12.2から）
• middleware.ts の置き場所は「pagesディレクトリと同階層（/src/pagesの人は /src/middleware.ts になる。よく「ルートにおく」と書いてる情報があるが間違い）」
• vercel側の環境変数は production preview development をターゲットに（あとから production だけ外せはそこだけ公開できるはず）

ずっと下書きなんで、とりあえず公開しておきます。
これだけでもわかる人には伝わるだろうとおもうので、、、時間できたらちゃんと書き、、た、、、、い、、、、。