When to use NextJS API Routes?

Question

I do not understand what extra functionality do /api/ routes have over getStaticProps and getServerSideProps.

I have seen few examples, where people like to make HTTP GET requests using getStaticProps and getServerSideProps and use /api/ route to make PUT PATCH DELETE requests.

Is there any official document on best practices on what to use for different use cases?

Answer 1

You use /api/ routes from the front end of your app. That means while your application is running and the page is already loaded. Let's say you have a dashboard page, and you are trying to display always fresh data. In that case, you would constantly hit your api routes to get the new data.

Also for example, if you have a todo app when the user saves a new todo task, you would post a request to api/todo to save the todo to the database.