Oi Rafael, tudo bem?

Entendo a sua preocupação em salvar as informações de um formulário ao atualizar a página no Next.js. Existem algumas abordagens que você pode considerar para persistir esses dados sem necessariamente recorrer ao uso do localStorage, sessionStorage ou cookies.

Uma maneira de alcançar esse objetivo é utilizando o conceito de gerenciamento de estado no Next.js. O Next.js oferece uma funcionalidade chamada "state persistence" (persistência de estado), que permite manter o estado dos componentes preservado durante a navegação entre diferentes páginas. Essa funcionalidade é útil para salvar informações de formulários e outros dados relevantes para a aplicação.

Para implementar a persistência de estado no Next.js, você pode utilizar bibliotecas populares de gerenciamento de estado, como o Redux, o MobX ou o Zustand. Essas bibliotecas fornecem mecanismos eficientes para armazenar e recuperar o estado da aplicação em diferentes páginas.

Vou apresentar um exemplo simples utilizando o Zustand como biblioteca de gerenciamento de estado. Primeiro, é necessário instalar o Zustand em seu projeto:

npm install zustand

Em seguida, vamos criar um arquivo chamado "store.js" para definir o estado global da aplicação. Nesse arquivo, vamos utilizar o Zustand para criar um store personalizado:

import create from 'zustand';

export const useFormStore = create((set) => ({
  formData: {},
  setFormData: (data) => set((state) => ({ formData: { ...state.formData, ...data } })),
}));

No exemplo acima, estamos criando um estado chamado "formData" para armazenar os dados do formulário. A função "setFormData" permite atualizar esse estado.

Agora, vamos utilizar esse estado no seu componente de formulário. Suponha que você tenha um componente chamado "Form" onde os usuários preenchem os campos:

import { useFormStore } from './store';

const Form = () => {
  const { formData, setFormData } = useFormStore();

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ [name]: value });
  };

  return (
    <form>
      <input type="text" name="name" value={formData.name || ''} onChange={handleInputChange} />
      <input type="email" name="email" value={formData.email || ''} onChange={handleInputChange} />
      {/* ... outros campos do formulário */}
    </form>
  );
};

export default Form;

No exemplo acima, estamos importando o useFormStore do arquivo "store.js" e utilizando o estado formData e a função setFormData para controlar os campos do formulário. Ao atualizar os valores dos campos, o estado será atualizado automaticamente.

Dessa forma, mesmo ao atualizar a página, os dados preenchidos no formulário serão preservados e poderão ser recuperados quando a página for carregada novamente.

Essa é apenas uma abordagem usando Zustand como exemplo. Você pode explorar outras bibliotecas de gerenciamento de estado, como Redux ou MobX, que também oferecem soluções eficazes para persistência de dados.

Lembrando que é importante ter cuidado ao armazenar e gerenciar dados sensíveis, como informações pessoais dos usuários. Certifique-se de tomar as medidas adequadas.

Um abraço e bons estudos.