We had a first look at Strapi in the previous video,
but to use it as a backend
for our Next Shop application
we need more than just a couple of products.
So I have prepared a Strapi project
that already includes some data,
and you can download it from the resources
attached to this lecture.
So please download this "next-shop-backend"
ZIP file from the lecture resources.
I'm going to save it into my Projects folder,
along with the "next-shop" project.
Let me open this file,
or better show it in Finder
from where I can unpack it
just by double clicking on it.
So this extracted a "next-shop-backend" folder,
that contains a Strapi project.
Let me open it in Visual Studio Code.
This project was generated using Create Strapi App,
like we've seen in the previous video,
but it already includes some data,
that's saved in this local SQLite database,
so you don't have to insert
all the products by hand.
Now, before we can start this server
we need to install the dependencies
by running "npm install".
Since we're not going to modify this code
we can build everything once
by typing "npm run build",
and this will create an optimised build.
From now on we can simply run "npm start",
and this will launch the Strapi server.
We can open the admin pages from this URL.
Let me get rid of this download.
But here we can log in as "admin@example.com",
this "admin" user was pre-created,
and the password is "Admin123".
Optionally you can tick this "Remember me" box,
but we should now be able to log in.
And this is the Strapi dashboard.
Note that I've already created
some collection types here.
"Users" is always there by default,
but I have already inserted a couple of users,
called "Alice" and "Bob".
This will be useful when we get to
implementing authentication.
Then there's a collection called "Cart Items".
We'll use this to implement the cart functionality
for our shop,
so that users can add products
to their shopping cart.
But we'll discuss the details
when we get to that point.
The first collection we'll use is Products,
which contains a list of items
that's what we'll sell on our shop.
Now, I had to pick some kind of products
that we can sell on our website,
and I chose indoor plants,
just because the day before I worked on this
I was buying some plants for my apartment.
So if we look at the first product for example,
this is the "Aloe Vera" plant.
Each product has "Title", "Description", "Price"
but also a "Picture", because
we'll want some images to display on our website.
So all this data is already included
into the downloadable project, including the pictures.
This way, from our Next.js application
we should be able to get this product data
simply by making an HTTP request to this server,
using the REST API.
Let's try this out in the REST Client
like we've seen in the previous video.
If I set the file type to "http"
then we can "GET" the Strapi URL
followed by "/products".
And if we send this request
we get a "200 OK" response,
because the server is already configured
with the right permissions.
And the body is a JSON array
containing all the products.
Note that the "picture" field
results in an object with many properties,
but we'll talk more about that
when we get to displaying the images on our website.
Ok, so now that we have the Strapi backend set up
we're ready to go back to our Next.js application
and discuss how we can fetch this product data
in order to display it in our shop pages.