如何在react/nextjs应用程序的每一页上显示购物车中的商品数量

// CartContext.js

import React, { createContext, useState } from 'react';

export const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState([]);

  const addItemToCart = (item) => {
    setCartItems((prevItems) => [...prevItems, item]);
  };

  const removeItemFromCart = (itemId) => {
    setCartItems((prevItems) =>
      prevItems.filter((item) => item.id !== itemId)
    );
  };

  const cartItemCount = cartItems.length;

  return (
    <CartContext.Provider
      value={{
        cartItems,
        addItemToCart,
        removeItemFromCart,
        cartItemCount,
      }}
    >
      {children}
    </CartContext.Provider>
  );
};

// App.js or pages/_app.js

import { CartProvider } from './CartContext';

function App({ Component, pageProps }) {
  return (
    <CartProvider>
      <Component {...pageProps} />
    </CartProvider>
  );
}

export default App;

// ExamplePage.js

import React, { useContext } from 'react';
import { CartContext } from './CartContext';

const ExamplePage = () => {
  const { cartItemCount } = useContext(CartContext);

  return (
    <div>
      <h1>Example Page</h1>
      <p>Cart Items: {cartItemCount}</p>
      {/* 其他页面内容 */}
    </div>
  );
};

export default ExamplePage;