Now with route groups out of the way,
there are just two more important route related features
I want to introduce you to.
And the first feature, which we won't need in this app here,
but which you still should know,
are so-called Route Handlers.
For that, I'll set up another path,
another route path, and I'll do it next to my route groups
because it actually won't belong to any
of these route groups
because it won't render an ordinary page
and therefore it won't need a layout.
And I'll name that path API though the name
as always is up to you.
But in there I'll now not add a page.js file.
That wouldn't work
because we wouldn't have a layout for that
if it's outside of one of these route groups.
Instead, I'll name it route.js,
which is another reserved name NextJS is looking for.
But with a route.js file,
you set up a so-called Route Handler,
which is different from a page.
Now, what is a Route Handler though?
A Route Handler is a file
in which you can export various functions,
which must be named GET or POST or PATCH or PUT
or DELETE and so on.
So as you can tell,
which must have an HtDP method name
because the idea behind Route Handlers is
that you can set up routes that don't return pages
that are rendered on the screen,
but instead in there in such Route Handlers,
you would typically return JSON data, for example,
or you would accept incoming JSON data
and return some JSON response.
So the idea behind these Route Handlers is simply
that you can set up API like routes,
which produce data, store data, do whatever you need to do,
but which essentially are called
behind the scenes from some client.
So from a mobile app or maybe even from one of your pages,
but not to render the overall page content,
but maybe just to store some data behind the scenes.
And you can set up multiple Route Handlers
in the same file here to handle different kinds of requests
for one in the same path.
Now these Route Handlers
will automatically receive a request object,
so that will be passed in by NextJS
and I'll simply log it here
so that we can see what's inside.
Of course, you also find all the details
in the official documentation
and they should then return a response.
And for that you can construct a new response object
using the default response class
that's provided out of the box by the browser
and by node.js.
And here you could either return some JSON response
or also just some plain text, which is what I'll do here.
JSON response could be returned with help
of the JSON utility method
that can be called directly on the response class,
by the way.
But here, I'll just return this text
and I'll comment out this POST Route Handler
since here I don't wanna handle POST requests.
But with such a Route Handler added in this case
for a GET request, we can of course still send a request
to it and we can simply send a GET request
by entering the path in our browser.
So in this case to /api,
because that's the path name I chose here.
And you will see that you see this Hello! text here,
which is indeed the text I am returning as a response.
And if you open that server site terminal,
you will see a lot of output there, which is essentially
that request object which is being output.
And you'll see that from that object,
you could get information like the method used,
which is not too surprising since we filter requests
by picking an appropriate name for our function.
But we could also extract a request body
if there would be any,
so that we could store data in a database, for example,
and extract any other information we might need
from that incoming request.
And therefore, even though we don't need
that Route Handler feature here,
and you might in general not need it too often
when building a NextJS application, it's important
to know about this feature
because it can be really helpful, especially if you,
for example, also want to connect our clients
to your NextJS application.
So if you're building a NextJS application
that should not just render its pages and so on,
but that should maybe also deliver data
to some mobile app which sends requests
to this NextJS application, well,
you could then build such Route Handlers
which handle the communication
with such an external client, for example.