No it is impossible. But why is it bad?

Requests to your api are simple http requests and users can simply copy the request details from the network tab to e.g. postman to reproduce the request. It is impossible to hide this and there’s nothing wrong with it

you're right, I thought it didn't look professional but I'm wrong

But if I want to forbid access to api outside the website, how can I make that ?

hellooo u would use some sort of token barear

but i cant explain how it works cuz i dont know it myself (i'm also studying this for the same purposes)

Anyone can reverse engineer your website so any attempts to hide it will be meaningless

If i really try to, i can get all the information needed for requests to reproduce similar requests

So it is impossible

You just need to do adequate server side validation, authentication and authorisation on all incoming requests before doing anything

If the request is valid it should be processed normally regardless of where it originates from

I don't understand, I can't restrict my api to my server only ?

So, technically, you are not supposed to use your API within your website. Since your website should be able to access that information without an API.

API's are for external consumption.

So it's not good practice to use an api for a backend and consume it for my frontend ?

Correct.

You don't need to.

I'm thought people make all backend on api endpoint and use them with frontend with node🫠

No, you don't need a API endpoint. You just access resources directly on the server

So I need api only if I want communicate between 2 applications (like mobile app and web app) right ?

Or if you want to expose something externally

vercel themselves beg to disagree

SPAs from ages until now have been following that approach

and fetching from API using react-query/swr is still very common

which is not a bad thing at all

it is still good practice, it is just that there are several ways to implement it

you can choose the way you prefer

data fetching from client components, data fetching in server components, etc.

Hmm. I asked about using your own apis when I first started learning next this year and that's what I was told.

I guess I'll need to look into it more. Still, back to ops question: I would not exist an API to the world that doesn't need to be exposed to the weekend.

there are even certain things that must need an API handler that the frontend communicates with, for example streaming APIs which have been trendy lately thanks to OpenAI and LLMs

the recommended way to do mutation in the app directory is still by making regular http requests to api endpoints/route handlers

and even if you use server actions, it is still http requests behind the scenes that can be viewed in the network tab and copied and replicated

http requests are the barebone of the internet and it is impossible to hide them all

So the conclusion is that it's good practice to make an API to build a web app ?

my answer is that: there are several good ways to build a web app, and using APIs is one of them. Do note however that if that API is for querying (reading information, not writing information), and you use the app router, you should be using server components instead

but we are getting off topic.

the main question is that "how can I hide API routes", for which the answer is much more straightforward "it is impossible"