Now that we've seen how the Cart Items API works,
your first challenge will be
to create a shopping cart page
that displays these items.
And by the way make sure you have these two entries
in your Cart Items collection,
with exactly the same details.
The "Ids" can be different of course,
because those are auto-generated,
but if you enter the same products and quantities
then it will be easier for you to compare your results
with what I'll show you in the videos.
So, as I mentioned, the task for this challenge
is to add a "Cart" page to our website.
We want to show a link to the Cart page
here in the NavBar,
and clicking that link should take you
to the "/cart" path,
that currently doesn't exist yet.
But it is your job now to go and add that new page
at the same level of the "index" page.
And you also need to add a link to it
in the NavBar component,
but only if the user is authenticated,
because you cannot display the cart items
if you don't know who the user is.
Once you've completed this challenge
your app should look like this:
you should have a "Cart" link in the NavBar
and if you click on it
it should take you to the Cart page,
that initially will just show "Cart" as the title.
We'll add the rest of the page later.
So it's a simple exercise to reinforce
how to add a new page,
and how to link to it.
Please pause this video now
and go and write the code.
Then restart the video when you're done
and I'll show you my solution.
Ok. Hopefully you managed to complete the challenge.
If you did so, you should now have
a "cart.js" file under "pages",
with a simple React component
that looks like this.
It's just using our shared "Page" component
setting the title to "Cart".
And then you should have modified
the NavBar component,
adding a link to the new "/cart" route.
Of course this should use the "Link" component
provided by Next.js.
And this list item should be
inside the fragment that's only displayed
if the "user" is signed in.
That's it.
It was a simple challenge to get you started.
In the next video we'll think about
how to display the cart items.