NextJS: Axios or Fetch post and get method result wrong URL path api [duplicate]

Question

here I want to make a post method on API but when I call the function it posts to the wrong path of API

here is my script for the post

 //Creating Order
  const createOrder = async (data) => {
    try {
      const res = await axios.post(
        `${process.env.API_ROOT}/api/orders` ||
          `${process.env.LOCAL_URL}/api/orders`,
        data
      );
      if (res.status === 201) {
        router.push(`/api/orders/${res.data._id}`);
        dispatch(reset());
      }
    } catch (err) {
      console.log(err);
    }
  };

I call that function when approve from Paypal and using the order button, but when I press the button the URL API path change to something ${process.env.API_ROOT}/undefined/api/orders or ${process.env.LOCAL_URL}/undefined/api/orders what cause this problem ?

but when im using something like its working

//Creating Order
  const createOrder = async (data) => {
    try {
      const res = await axios.post(`/api/orders`,data);  <=====  its working
      if (res.status === 201) {
        router.push(`/api/orders/${res.data._id}`);
        dispatch(reset());
      }
    } catch (err) {
      console.log(err);
    }
  };

Answer 1

That is the front-end part of the code and your process.env.API_ROOT resolves to undefined. However there is a way to use process.env variables in the frontend code, you just need to prefix them with NEXT_PUBLIC like this:

process.env.NEXT_PUBLIC_LOCAL_URL
process.env.NEXT_PUBLIC_API_ROOT

More info in the official documentation