Netlify x Nextjs v13でBasic認証をかけるとBufferエラーになる

Basic認証かけるとエラーになる

確か「ReferenceError: Buffer is not defined」とかだったと思います。

結論

const [user, pwd] = Buffer.from(authValue, "base64").toString().split(":");

↓

const [user, pwd] = atob(authValue.replace(/=/g, "")).split(":");

とすることで解決します。

経緯

Nextjsを用いてJamstack製のサイトを構築しており、ホスティングはNetlifyを利用。
Basic認証をかけようと公式ドキュメントといくつかの参考サイトを拝見しました。

Next.jsでBasic認証を設定する
Next.js Basic認証

ただこれらをそのまま利用しようとするとデプロイ後にエラーがでます。

npmでBufferをインストールしてみたりしましたが結果は同じくでした。
解決策はBufferをatobに変更することでした。

詳しく知りたい方は続きを読んでみてください。

ちゃんと知りたい人向け

Bufferとは

Bufferは、Node.jsで利用されるクラスで、バイナリーデータを扱うためのものです。Bufferは、バイナリデータを安全に管理し、その上で文字列とバイナリデータの間で変換を行うための多くのメソッドを提供します。Bufferは、多くのエンコーディングをサポートしており、base64、utf-8、asciiなど、さまざまなエンコーディング間でデータを変換することが可能です。

atobとは

一方、atobは、ブラウザのJavaScript環境で利用できる関数で、ASCII文字列をbase64からデコードします。この関数は、入力としてbase64形式の文字列を受け取り、それをデコードしてASCII文字列を返します。しかし、atobはbase64のデコードだけをサポートしており、その他のエンコーディングには対応していません。

バイナリデータとは

料理で言うとビタミンとかタンパク質みたいなものです。
コンピューターを構成する上で最も基本的なデータ構造です。

コンピュータがデータを操作する基本的な形はバイナリです。バイナリデータとは、ビット列（0と1の列）として表されるデータのことを指します。これには、テキスト、画像、音声、動画など、あらゆる種類のデータが含まれます。

エンコードとは

料理に例えると食材の加工と言い換えられます。扱いやすいデータに一旦変換します。

エンコーディングは、一つの形式のデータを別の形式に変換するプロセスを指します。たとえば、テキストデータは、そのままではコンピュータにとって意味をなさないため、それをバイナリデータ（0と1の列）に変換する必要があります。このプロセスを「エンコーディング」あるいは「符号化」などと言います。

たとえば、ASCIIエンコーディングは、英字や数字、一部の記号を7ビットのバイナリコードに変換します。他にも、UTF-8はより多くの文字（全世界の言語の文字や絵文字など）を表現するためのエンコーディング方式です。Base64はバイナリデータをASCII文字列に変換するエンコーディングで、データをテキスト形式で安全に送受信したり保存したりする際によく使われます。

デコードとは

料理に例えると調理です。加工されたものを調理したり、おいしくしたりする作業です。

デコーディングは、エンコーディングの逆のプロセスで、エンコーディングされたデータを元の形式に戻します。たとえば、Base64エンコーディングされたテキストデータを元のバイナリデータに戻すことは「デコーディング」と言います。

これらの概念は、コンピュータシステムがデータをどのように扱うか、そしてデータがどのように転送されるかを理解する上で非常に重要です。