Usando localStorage no NextJs

Em alguns momento o localStorage pode ser uma saída bem interessante, mas você sabe o que é e pra que serve? Sabe como usar no NextJs sem ter erros no servidor?

O que é o localStorage?

Se já sabe o que é o localStorage pode pular esse primeiro tópico
O localStorage é uma API do navegador que permite armazenar dados localmente no navegador/computador do usuário.

Esses dados são armazenados permanentemente e podem ser acessados e modificados, permitindo acessar e recuperar mesmo após o usuário fechar o navegador ou até mesmo reiniciar o computador. Essa é uma explicação bem breve, mais detalhes o tio Google ou GPT explicam.

Como Gravar

O código completo desse exemplo você pode acessar pelo GitHub, mas por favor leia com atenção, no final deixei o link ✌

Nesse exemplo, eu gravo os dados de um state no localStorage quando o usuário clica num botão, segue abaixo a sequencia.

1- Passo as variáveis pra função handle

 javascript
<button onClick={() => handleAddToCart(prod.id, prod.name, prod.valor)}> //aqui eu chama a função e passo as variáveis do array
   <Image src={addBt} width="24" height="24"/>
</button>

2- Na função handle, eu chamo o hook useReducer e atualizo o state 👇

 javascript
  function handleAddToCart(itemId: any, itemName: any, itemValue: any) {
    dispatch({ type: "ADD_TO_CART", payload: { id: itemId, name: itemName } });
  }

3- Nesse useEffect eu monitoro o state e sempre que tem uma alteração nos valores, ele grava os dados no localStorage.

useEffect(() => {
    if (state.cartItens !== null) {
      localStorage.setItem("cartItems", JSON.stringify(state.cartItems));
    }
  }, [state]);

Aqui nesse print, pelo DevTools do Chrome, é possível ver no navegador como os dados são salvos.

Repare que ele cria um cara chamado cartItems, que foi o nome que eu defini. Ele pega o valor do state.cartItems e salva numa variável cartItems dentro do localStorage.

localStorage.setItem("cartItems",JSON.stringify(state.cartItems));

Conforme eu vou adicionando itens ao meu carrinho, ele adiciona esses itens no localStorage também.

Como Ler

Até aqui talvez não tenha nenhuma novidade, mas no Next, o detalhe está na hora da leitura.

Como o NextJs roda no servidor, mas os dados do localStorage estão no client, é preciso criar uma verificação, e fiz isso nessa função getStoredCartItems()

function getStoredCartItems() {
  if (typeof window !== "undefined") {
    const storedCartItems = localStorage.getItem("cartItems");
    if (storedCartItems !== null) {
      try {
        const cartItems = JSON.parse(storedCartItems);
        return cartItems;
      } catch (error) {
        console.error(error);
      }
    }
  }
  return [];
}

E o segredo está todo aqui no if... aqui ele valida se está rodando no client evitando erros, pois no server não existem essas os dados do window.
if (typeof window !== "undefined")

E na variável do useReducer ele começa chamando essa função 👇

const [state, dispatch] = useReducer(cartReducer, { cartItems: getStoredCartItems() });

Dessa forma, temos os seguintes passos:

1. Verifica se está rodando no client
2. Verifica se existem dados gravados no localStorage
3. Se houver, carrega esses dados no state.

O código completo desse projeto está no link abaixo, especificamente em Components/Lista.tsx 👉 GitHub/andpeicunha