I am unable to utilize Local Storage within NextJS

Question

I am unable to utilize Local Storage within NextJS

type merchandiseProps = {
  merchandises: merchandiseType[];
  cart?:string,
  collection?:string,
  fallbackData?: any
};

const MerchandiseList: FC<merchandiseProps> = ({ merchandises }) => {
  const [cart, setCart] = useState<merchandiseType[]>(
    typeof window !== undefined ? JSON.parse(localStorage.getItem("collection") || "[]") : ''
  );
  const [wishlist, setWishlist] = useState<merchandiseType[]>(
    JSON.parse(localStorage.getItem("collection") || "[]")
  );

  useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));
    localStorage.setItem("collection", JSON.stringify(wishlist));
  }, [cart, wishlist]);

  const addToCart = (item: merchandiseType) => {
    setCart([...cart, item]);
  };

  const addToCollection = (item: merchandiseType) => {
    setWishlist([...wishlist, item]);
  };

I'm trying to use typeof window but facing issues. Seeking assistance..................

typescript next.js

Answer 1

Answer №1

Apparently, the usage of Next's SSR or SSG on your website is causing the (pre-)rendering of pages on the server where window is not defined, as you mentioned.

The problem lies in the following code snippet:

 const [cart, setCart] = useState<productsType[]>(
    typeof window !== undefined ? JSON.parse(localStorage.getItem("wishlist") || "[]") : ''
  );

On the server side, the variable cart will be initialized as an empty string, while on the client side during React Hydration, it will fetch the value from localStorage, leading to a content-mismatch error during hydration.

If you are encountering the error message:

Hydration failed because the initial UI does not match what was rendered on the server.

Solution

To resolve this issue, initialize the state inside a useEffect that only runs on the client side, like so:

 const [cart, setCart] = useState<productsType[]>([])

  useEffect(() => {
    if (cart.length) return;
    
    const localVal = JSON.parse(localStorage.getItem("wishlist") || "[]")

    if (Array.isArray(localVal) && localVal.length){
       setCart(localVal)   
    }

  }, []);

If you wish to synchronize localStorage with the state, you can use the following approach instead:

 const [cart, setCart] = useState<productsType[]>([])

  useEffect(() => {
    if (cart.length){
       localStorage.setItem("cart", JSON.stringify(cart));
       return;
    }

    const localVal = JSON.parse(localStorage.getItem("wishlist") || "[]")

    if (Array.isArray(localVal) && localVal.length){
       setCart(localVal)   
    }

  }, [cart]);

Answer 2

Apparently, the usage of Next's SSR or SSG on your website is causing the (pre-)rendering of pages on the server where window is not defined, as you mentioned.

The problem lies in the following code snippet:

 const [cart, setCart] = useState<productsType[]>(
    typeof window !== undefined ? JSON.parse(localStorage.getItem("wishlist") || "[]") : ''
  );

On the server side, the variable cart will be initialized as an empty string, while on the client side during React Hydration, it will fetch the value from localStorage, leading to a content-mismatch error during hydration.

If you are encountering the error message:

Hydration failed because the initial UI does not match what was rendered on the server.

Solution

To resolve this issue, initialize the state inside a useEffect that only runs on the client side, like so:

 const [cart, setCart] = useState<productsType[]>([])

  useEffect(() => {
    if (cart.length) return;
    
    const localVal = JSON.parse(localStorage.getItem("wishlist") || "[]")

    if (Array.isArray(localVal) && localVal.length){
       setCart(localVal)   
    }

  }, []);

If you wish to synchronize localStorage with the state, you can use the following approach instead:

 const [cart, setCart] = useState<productsType[]>([])

  useEffect(() => {
    if (cart.length){
       localStorage.setItem("cart", JSON.stringify(cart));
       return;
    }

    const localVal = JSON.parse(localStorage.getItem("wishlist") || "[]")

    if (Array.isArray(localVal) && localVal.length){
       setCart(localVal)   
    }

  }, [cart]);

I am unable to utilize Local Storage within NextJS

Answer №1

Solution

Similar questions

Exploring Several Images and Videos in Angular

Discovering active path while utilizing dynamic routes - here's how!

Using Angular, a function can be called recursively directly from within the HTML

Can dot env be utilized with next export functionality?

Navigating back using the 'Back' button for modals with dynamic search parameters in a Next.js application router

Stopping event propagation does not function properly when using the Ant Design Dropdown Menu

Lack of MaterialUI Table props causing issues in Storybook

The NgModel within the parent component is expected to mirror the state of the child component

Error: Unable to locate metadata for the entity "BusinessApplication"

No data is generated when choosing from the dropdown menu in mat-select

Packaging a NodeJS project in Visual Studio - A step-by-step guide to creating and setting up an N

Vite HMR causes Vue component to exceed the maximum number of recursive updates

Navigating through pages: How can I retrieve the current page value for implementing next and previous functions in Angular 7?

A guide to implementing vue-i18n in Vue class components

Developing typeScript code that can be easily translated and optimized for various web browsers

Creating cookie files in the web browser following the activation of a stripe webhook handler

Encountering a 503 ERROR message stating "The request could not be satisfied" following the implementation of getServerSideProps in the pages directory

Introduction to React with Typescript: Greeting the World

Steps to forward a restricted user to a specific webpage

Utilizing TypeScript generic types as a key for an object