All language subtitles for 002 What are _API Routes___Downloadly.ir_en

Now what are API routes?

It's important to understand and keep

in mind that some websites which we're building

don't just need HTML pages that are being served

back to visitors upon requests.

That of course is something which most websites need

but it's not the only thing that can be needed by a website.

You might, for example, have a feature

on your website that allows users to submit feedback

or sign up for a newsletter.

Now, when a user clicks such a button

to for example sign up for a newsletter,

you don't necessarily want to show a different page.

I mean you could show a confirmation page

that it was successful,

but you could also just show a little info pop-up

or a banner on the existing page.

But even if we ignore what we show

let's think about what happens behind the scenes

when we sign up for a newsletter.

Then we need to send data to some server

to some computer to then store that entered newsletter

email address in some database.

And that request which is being sent there

is not about fetching a site.

It is about storing data.

So it's kind of the other direction.

We don't want to get a HTML page.

Instead. We want to send that user entered data

to some database.

And that is what we use APIs for

Application Programming Interfaces.

There are different kinds of APIs we could build.

REST APIs are the most popular form of APIs.

And the idea is always the same that we have

a web server that exposes certain URLs.

Just as we did it thus far in the course

but those you are URLs are not about getting requests

and sending back HTML data,

but they are about accepting some data

and then sending back responses

with any kind of data, not necessarily HTML.

Specifically JSON, JavaScript Object Notation,

would be the most common format for exchanging such data.

So API routes are special kind of you are URLs,

which you can add to your Next.js application,

which are not about getting a standard browser request

and sending back a pre-rendered HTML page,

but which are instead about getting data, using data,

maybe storing data in some database

and sending back data in any form of your choice.

So in the end API routes, this Next.js feature

is a feature that allows us to build a API,

a REST API if you will, as part of our Next.js app.

And it would, for example, allow us to support URLs

or PRURLs after our domain, like this /apifeedback

and then accepting different kinds of HTTP requests.

Not just get requests as all our page routes did thus far

but also post or put or delete requests, whatever you need.

And then depending on which HTTP method was used

for which path, different actions could be triggered.

If, for example, for a post request send to

/api/feedback, we might expect some data

to be sent along with that incoming request

some feedback data entered by a user.

And then when that request hits our API

we extract that data from the request

and store it in a database.

If the get request reaches that same URL,

we instead might want to fetch data from a database

and send that back but not as an HTML page

but instead as raw data in that JSON format.

And those API routes, therefore don't exist to be entered

in the URL typically, but instead to be triggered

via JavaScript code, via Ajax requests.

So we as a developer add certain code

to our page that sends these behind the scenes requests

you could say to our API to store or fetch data.

And that is actually something we already did

in this course.

When we worked with Firebase, when we sent requests

to Firebase, then there, we talked to the Firebase API.

We sent requests to certain URLs

for restoring data and for getting data.

And these URLs. These Firebase URLs.

We didn't enter them into browser.

Instead we send requests through our JavaScript code.

No matter if that code then runs

on the client or on the server

we talked to that Firebase API.

And now it is API routes' feature is about letting us

to find our own API end points

as part of our Next.js application.