Now for this section,
I prepared a brand new basic NextJS project
and you find it attached.
Once you downloaded it,
you'll just need to run npm install once
to install all the dependencies,
and then you can start the development server
with npm run dev.
And you'll then get a very simple application
that allows you to view posts if there were any.
We'll add some soon.
And which most importantly,
therefore also allows you to add new posts.
And that's precisely what we'll work on
throughout this section
because, of course it's that adding posts part
that involves the creation of new data
and therefore the mutation of data
and that's exactly the main topic of this section.
So we got a form
in this starting application I provided to you.
And the goal of course, is to make sure
that when this form is submitted
with help of that create post button,
that we save the data that has been entered here,
that we store the uploaded image somewhere,
and that we store the title and the content somewhere,
for example, in a database.
And indeed, in this starting project I prepared for you,
you'll find a lib folder
and in there, you'll find a posts.js folder,
which does indeed include code
to store a new post in a database.
And this file actually also contains
much more code than that.
It also includes all the code for setting up that database
and that code will run
every time you start this application,
making sure that all the necessary tables are created
if they don't exist already.
And as you see here, we have a users table,
we have a posts table, and we have a likes table.
And I'm using a SQLite database here
to store all that table data.
And I also got some code here to set up two dummy users,
which we'll use throughout this section.
You will learn how to add authentication
and user management later in this course.
For now, we'll work with these dummy users here.
So that's what we got in there.
And then as mentioned, we got this storePost function,
which in the end, of course should be triggered
whenever this form here is submitted.
And that, of course means that we need to find out
how we can handle the submission of this form.
And for that, we got various options.
One option would be
to set up a standalone separated backend API
that accepts requests that contain that form data
and that then stores the submitted data in some database.
Kind of similar to what I showed you
in the data fetching section,
where we also started with an external API.
But for the same reasons we didn't use that external API
in that data fetching section,
the reason was in the end that we own the data source
and therefore it doesn't really make sense
to set up such an extra API.
For that reason, I won't use
that external API approach here
because why would we create a separate backend API
and a separate project
if we can actually integrate the logic
for accepting form submissions
and storing data in some database
directly into our NextJS application.
And as it will turn out,
we can indeed manage all that directly
in this NextJS application.
And that's therefore the approach I'll use here
in this section because this is a NextJS course
and being able
to handle data submissions is a core NextJS feature.
Now, what we could do as an alternative would be
to add some route handlers here in our project.
We could, for example, in the app folder, add an API folder
and then there add a posts folder
or whatever you wanna name it.
And then in there, add a file named route.js.
I taught you about these route handlers
earlier in the course already.
In there, we could export a function called post.
And with that we would be able to send
and handle post requests to /api/posts.
And then we could put all the logic
for extracting the request body
because we would receive the request
as a argument automatically.
And all the logic for storing that extracted data
into this function here, into this route handler.
We could do that
and that might be a valid approach
if we also have other clients submitting data,
a mobile app for example,
that also needs to send data entered by a user.
But if we're just building this one NextJS application,
this also isn't really something we have to do.
Sure, we could set up those extra routes
and then send data to those routes from the client side,
but NextJS actually offers us a better way
of handling data submissions and data mutations,
and that would be Server Actions.