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

Retrieve all values of a specific enum type in TypeScript

Conceal the secret key for the Firebase FCM service worker

Next.js is optimized for simplicity and ease-of-use, making it

What is the best way to retrieve information from multiple pages of my REST API?

typescript defining callback parameter type based on callback arguments

Combining SSR and client data within components is a unique feature of Nextjs

Encountering crashes while initializing the router in the constructor of a service in Angular 4.3

Using TypeScript or JavaScript, set object keys as fields of a class

Insert a new item into the array located within an Observable entity

Utilizing nested namespaces for optimal organization and clarity

ts-node: The colon symbol was not expected in this context

Aligning two identical components within the same container when triggered by a single click

Troubleshooting the ReferenceError: Blob is not defined problem with the heic2any library in a Next.js application

Enhancing AWS Amplify Auth elements using TypeScript

Encountering a 404 error when using the NestJS GET function within the service and controller

Identifying misspelled names in shared resources textures during PIXI.js loading

Implementing image uploads in a React application on a Digital Ocean hosted server

Tips for ensuring session token verification remains intact upon reloading

International replacement of external interface exportation

Issues with identifying the signature of a class decorator arise when invoked as an expression