外部APIとの通信 pathの設定

Question

postの処理を実行しデータを登録したいです。

const path = ${process.env.BASE_URL}/user;のURLにアクセスしたいのですがonClickの処理が実行された時にエラーになってしまいました。
エラー内容は　*xhr.js?b50d:181 POST http://localhost:3000/undefined/user 404 (Not Found)
と表示されており.envのURLがundifindとなっていました。

なぜundifindとなってしまうのしょう？原因わかる人いましたら教えて欲しいです。よろしくお願いします。

const onClick = () => {
    User(state.id);
  };

  const  User =  async(id: number) => {
    const path = `${process.env.BASE_URL}/user`;
      try {
        const res: any = await　axios.post(path, {
          params: { id }
        });
        return res;
      }
      catch(err) {
        console.log(err);
      }
  }

ENV BASE_URL https://api-app.com

開発環境
react next.js typescript

// 追記

require('dotenv').config();

module.exports = {
  env: {
    BASE_URL: 'https://api-app.com',
  },
};

Answer 1

ENV BASE_URL https://api-app.com

上記はどこに記載されている内容ですか？
`Next.js`なので`next.config.js`に記載されているはずですが、その場合記法が異なるのではないでしょうか?

- [next.config.js: Environment Variables](https://nextjs.org/docs/api-reference/next.config.js/environment-variables)

Comments

[yuyuyuooo]

ご回答ありがとうございます。
next.config.jsファイルを作り上記に追記した内容を書きました。
いったんサーバーを落とし、もう一度yarn devでサーバーを起動したのですが
Error: Cannot find module 'dotenv'　
code: 'MODULE_NOT_FOUND',
requireStack: [
'/next.config.js',
'/node_modules/next/dist/next-server/server/config.js',
'/node_modules/next/dist/next-server/server/next-server.js',
'/node_modules/next/dist/server/next.js',
'/node_modules/next/dist/server/lib/start-server.js',
'/node_modules/next/dist/cli/next-dev.js',
'/node_modules/next/dist/bin/next'
]
}というエラーが表示されました。どうしたらいいでしょうか？

[nekoniki]

エラーのとおり`dotenv`がインポートされていないためだと思います。
require('dotenv').config();
上記の1行は提示したリンク先のサンプルにもなかったと思いますが、どこを参考に記載されましたか？

もともとdotenvを使っていない限り、記載する必要はないのかなと思います。
この辺りの話は下記の記事が参考になります。
https://qiita.com/matamatanot/items/1c8f1c1e21664591c220