Как сохранить состояние в localStorage с помощью инструментария redux в проекте nextjs

Я хочу сохранить свое обновленное состояние в localStorage, но при попытке сделать это возникает ошибка. localstorage is not defined

cartSlice.jsx

import {v4 as uuid} from "uuid";
import {createSlice} from "@reduxjs/toolkit";
const data = JSON.parse(localStorage.getItem('cart'));
export const cartSlice = createSlice({
  name: 'shoppingCart',
  initialState: data ? data : [],
  reducers: {
    addToCart: (state, action) => {
        const product = action.payload;
        const productInCart = state.find(item => item.id === product.id && item.color === product.color && item.size === product.size && item.material === product.material);

        if (productInCart) {
            const cartProductIndex = state.findIndex(item => item.id === product.id);
            state[cartProductIndex].quantity = state[cartProductIndex].quantity + product.quantity;
        } else {
            product['cartId'] = uuid();
            return [product, ...state];
        }

        localStorage.setItem('cart', JSON.stringify(state));
    }
}
})

cartAction.js

import {addToCart} from "@slices/cartSlice";

export const addToCartAction = (payload) => (dispatch) => {
 dispatch(addToCart(payload))
}

Как это решить?