I am trying to use local storage in nextjs with redux, I know that With Next.js, components are rendered server-side. localStorage - or the window - is not available until rendered in a browser. That's why I used this typeof window !== "undefined"; Now the error is showing Hydration failed because the initial UI does not match what was rendered on the server.

import { createSlice } from "@reduxjs/toolkit";
const clientSide = typeof window !== "undefined";

const initialState = {
  cart: clientSide
    ? localStorage.getItem("cartItems")
      ? JSON.parse(localStorage.getItem("cartItems") || "{}")
      : []
    : [],
  cartTotal: 0,
  cartTotalQuantity: 0,
};