Provide the Wishlist Across the App

Make the shared state available to every route and component that needs it.

Step 1 — Import the provider into the root layout

Open app/layout.tsx and add the context import.

import { WishlistProvider } from "@/context/WishlistContext";

Step 2 — Wrap the application body

Move the existing navigation and route content inside the provider.

<WishlistProvider>
  <nav className="nav">...</nav>
  {children}
</WishlistProvider>

The provider is now above the browse page, movie detail page, and wishlist page in the component tree.

Checkpoint

The app still renders normally, but any Client Component beneath the layout can now call useWishlist() and receive the same state instance.