Error: Missing credentials for "PLAIN" の解消方法

公開日:

更新日:

やり方 : 環境変数の先頭に「NEXT_PUBLIC_」を付与する

①Error: Missing credentials for "PLAIN" というエラーが発生した状況

NextJS & VercelでNodemailerを使用して「お問い合わせ」ページを作成していました。

その際shinさんのチュートリアルがとても参考になったので共有します。

ローカル環境では無事にGmail宛にメールが届いたのですがVercelにデプロイしたアプリではエラーが発生しました。

下記がエラー内容です。

Vercel内で確認したエラー

1Error: Missing credentials for "PLAIN"
2    at h._formatError (/var/task/.next/server/app/api/contact/route.js:12:190568)
3    at h.login (/var/task/.next/server/app/api/contact/route.js:12:185605)
4    at <unknown> (/var/task/.next/server/app/api/contact/route.js:12:218450)
5    at h.<anonymous> (/var/task/.next/server/app/api/contact/route.js:12:182003)
6    at h._actionEHLO (/var/task/.next/server/app/api/contact/route.js:12:198684)
7    at h._processResponse (/var/task/.next/server/app/api/contact/route.js:12:192879)
8    at h._onData (/var/task/.next/server/app/api/contact/route.js:12:190260)
9    at TLSSocket._onSocketData (/var/task/.next/server/app/api/contact/route.js:12:181693) {
10  code: 'EAUTH',
11  command: 'API'
12}

②原因：メールを送る際、環境変数の読み込みでこけていたことが判明

原因は環境変数の書き方にありました。

下記がエラーが出たコードです。

.env

1GMAIL_USER = "対象のGmailアドレス@gmail.com"
2GMAIL_PASSWARD = "設定しているパスワード"

これを下記のように変更します。(頭にNEXT_PUBLIC_をつける)

.env

1NEXT_PUBLIC_GMAIL_USER = "対象のGmailアドレス@gmail.com"
2NEXT_PUBLIC_GMAIL_PASSWARD = "設定しているパスワード"

Vercelの環境変数も同じように設定して下さい。

Vercelの環境変数を設定する画面

上記の設定をすると無事にデプロイしたアプリでもメールが送れます。

原因や理由などは下記のページを読むと分かりやすかったです。

Nextjsで.envが読み込まれない (undefinedになる)

Next.js における環境変数 (env) の基本的な設定方法

以上、Nextjs ＋ Vercel ＋ Nodemailerを利用する際のTipsでした。

お役に立てましたら幸いです。

ご一読頂きありがとうございました。