Next.js cart storage

Hi!

I’m using the library with Next.js.

When trying to using the library in pages which rendered server-side, the content of the server doesn’t match the client. It seems this could be related to the cart being stored using localStorage and this is not available on the server, only in the client.

One thought it to use the storage prop, have you ran into this issue before ?

I tried using the storage prop and the following snipped fails with the following error. Could you provide an example of how the prop should be used and its initial value

function MyApp({ Component, pageProps }) {
  const [cart, setCart] = useState();
  return (
    <div>
      <CartProvider storage={() => [cart, setCart]}>
        <Layout>
          <Component {...pageProps} />;
        </Layout>
      </CartProvider>
    </div>
  );
}

[mattdjenkinson]

Hey, has there been a solution for this yet in NextJS? I’m getting a server and client mismatch on page reload.

[joshuabaker]

@notrab That approach is working for us.

import { Fragment, useEffect, useState } from "react";
import { CartProvider as BaseCartProvider } from "react-use-cart";

export default function CartProvider({ children, ...props }) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => setMounted(true));

  if (mounted) {
    return <BaseCartProvider {...props}>{children}</BaseCartProvider>;
  }

  return <Fragment>{children}</Fragment>;
}