Next.js ver13系でmiddlewareを用いてBasic認証を実装する方法をご紹介します。Vercelで環境毎にBasic認証の設定を変更する方法も合わせて記載します

Next.js ver.12からMiddlewareが導入されました。これによりライブラリを使わず簡単にBasic認証を設定することが出来るようになりました

Next.jsでBASIC認証（ベーシック認証）を導入する方法をご紹介します。最終的にローカルではBASIC認証がかからないけど、VercelではBASIC認証がかかるようにします。

Netlify x Next.jsのプレビュー環境にBasic認証を設定してみます。注意点としてベーシック認証はProプラン以上ではないとかけられません。