【Nextjs】.envに設定したURLが読み込まれないエラーの解決方法について

はじめに

Nextjsでアプリ開発中本番環境のURLが読み込まれていないエラーが表示され、そちらの解決方法について記事にします。

【修正前のコード】

.env

API_URL= xxxxxxxxxx

.tsx

const API_URL = process.env.API_URL || "http://localhost:8787";

解決方法

NEXT_PUBLIC_を使用する

.env

NEXT_PUBLIC_API_URL= xxxxxxxxxx

.tsx

const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8787";

参考

おわりに

今までNEXT_PUBLIC_の意味を理解せず使用しておりました。
勉強になりました。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼