Post request from client component
Unanswered
Redbone Coonhound posted this in #help-forum
Redbone CoonhoundOP
Hi, so I was wondering what the proper way is to make post requests from client components. I have a form which sends data to a url over the internet. It has to be a client component because it uses state. I set up a utility function using axios which posts the data from the form. My url is stored in an env file. I can make the post request perfectly from server components, however when I switch into client components, it ignores the env variable and posts to localhost port 3000 (in which the page is being held). I'm guessing client components do not have access to env variables. What would be the correct way to proceed? Is there any way to make the env variable accessible to client components?
3 Replies
@Redbone Coonhound Hi, so I was wondering what the proper way is to make post requests from client components. I have a form which sends data to a url over the internet. It has to be a client component because it uses state. I set up a utility function using axios which posts the data from the form. My url is stored in an env file. I can make the post request perfectly from server components, however when I switch into client components, it ignores the env variable and posts to localhost port 3000 (in which the page is being held). I'm guessing client components do not have access to env variables. What would be the correct way to proceed? Is there any way to make the env variable accessible to client components?
yes, you can share specific env. variables with the browser (client) to make them accessable by the client (browser). Like that you can access from clientside the env. variables and can procceed whatever you want to do[.](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser)
@Redbone Coonhound solved?
@Redbone Coonhound Hi, so I was wondering what the proper way is to make post requests from client components. I have a form which sends data to a url over the internet. It has to be a client component because it uses state. I set up a utility function using axios which posts the data from the form. My url is stored in an env file. I can make the post request perfectly from server components, however when I switch into client components, it ignores the env variable and posts to localhost port 3000 (in which the page is being held). I'm guessing client components do not have access to env variables. What would be the correct way to proceed? Is there any way to make the env variable accessible to client components?
by adding prefix
NEXT_PUBLIC to your env var name, it will be accessible from client @Redbone Coonhound