Initialize the Cart with Server Data

Now that we have our Cart Context working, the next step is to get the initial data brought in. In this case, we want to see the two cart items on the initial page render from the server.

In order to do this, we need to get data from our React Server Components into our Client Components.

Challenge

Your objective is to initialize the cart context with the current contents of the cart from the server.

This will require you to add a new CartContext component and add it to the layout.tsx file.

The Layout component already gets the current contents of the cart:

const cart = await getCart();

All you'll need to do is connect this cart to the CartContext component.