ProNextJS
    State Management with Next.js App RouterLevel up with State Management with Next.js App Router

    I respect your privacy. Unsubscribe at any time.

    This is a free tutorial

    In exchange for your email address, you'll get full access to this and other free ProNextJS tutorials.

    Why? First and foremost, your inbox allows us to directly communicate about the latest ProNextJS material. This includes free tutorials, NextJS Tips, and periodic update about trends, tools, and NextJS happenings that I'm excited about.

    In addition to the piles of free NextJS content, you'll get the earliest access and best discounts to the paid courses when they launch.

    There won't be any spam, and every email you get will have an unsubscribe link.

    If this sounds like a fair trade, let's go!

    exercise

    Initialize the Cart with Server Data

    Jack HerringtonJack Herrington
    CodeGitpod

    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.

    Transcript

    Now that we have our cart context all ready to go, we want to see that initial data, those two cart items on the initial page render from the server. So we want to make sure that our cart context is initialized properly to whatever we have on the server. Now, this is an interesting exercise because it shows us how to get

    data from our React server components into our client components. If you have any questions or get stuck, be sure to check out that resource section associated with the video. Good luck.