POST call on Server Side

[Kurm-U]

I want to hit POST API on server side so no one can see in dev tools of browsers.

[serdar-webdev]

More details, please

[serdar-webdev]

code screenshots, why are you using that, explain problem by details

[Kurm-U]

Sorry for the delay

Here some Screenshots

in this file I have login handler and this is client component

in this file I have created axiosInstance

now whenever this API hit to server it's visible in devtools, and I don't want to show in devtools like other GET API so do you have any solution regarding this...?

Because if we want to do like this we basically create server component and if I turn Login component in server component it doesn't work......

[serdar-webdev]

look here how you can solve this:
I don't know how axios works in server, but in next js it recommended to use fetch function, because it's enough ( i think );

here is your server action :
const login = async (formData: any) => {
try {
await fetch("/user/login", {
method: "POST",
body: formData,
headers: {
"content-type": "multipart/form-data",
cookie: cookies,
},
})
} catch (error) {
console.log(error)
}
}

and here is your component:

const LoginComponent = () => {
return (

<button
onclick={async () => {
login(formData as any)
}}
>

)
}

[serdar-webdev]

let me know if you have problems with that

[Kurm-U]

The problem is if I use fetch then how I change my axiosInstance logic

[ibharathboga]

did you look into server actions ?
server actions are post request type and run in the server. i also think you can use axios there.
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

[Kurm-U]

Ya I tried it but I couldn't grasp the logic so I'm looking for more example.

[ibharathboga]

there are lots of youtube videos explaining it. this one helped me : youtube
maybe watch this video and try again ? if you still face issues, feel free to ping me

[Kurm-U]

thanks for suggestion let me check...!

[serdar-webdev]

Here is the server action ( it will run in server and users dont have access to it ), here you have to try to implement axios, i think it will work

Here your client component

[Kurm-U]

is this correct structure

[serdar-webdev]

it won't be a problem, tell me what version of next do u use and which directory, app or pages?
So i dont use pages folder; here what i usually have inside src folder:

• app
• components
• actions
• store
  and etc

[Kurm-U]

I'm using Next 14.2.3 and I didn't work with Next before so I don't have deep idea about app or pages routing.

[serdar-webdev]

So you are using app router, it recommended and learn about server actions in next js and how to handle them, so after you can use my code snippets above and try it yourself; https://www.youtube.com/watch?v=5MRLO-7O2So

[Kurm-U]

Okay let me check