How to fix the Hydration error when using localStorage with Next.js?

I'm trying to persist context in localStorage in a Next.js project, but I get a hydration error when I refresh the page.

How can I solve this problem?

type AppState = {
  name: string;
  salary: number;
  info: {
    email: string;
    department: string;
  };
};

interface Props {
  children: ReactNode;
}

const initialState: AppState = {
  name: "osamu1908",
  salary: 2000,
  info: {
    email: "dynamic@gmail.com",
    department: "software developer",
  },
};

export const AppState = createContext<AppState>(initialState);
export const AppStateSet = createContext<Dispatch<SetStateAction<AppState>>>(
  () => {}
);

const initalFromLocalStorage = () => {
  if (typeof window !== "undefined") {
    const result = localStorage.getItem("state");

    if (result) {
      return JSON.parse(result) as AppState;
    }
  }

  return initialState;
};

const AppStateProvider = ({ children }: Props) => {
  const [state, setState] = useState<AppState>(initalFromLocalStorage());

  useEffect(() => {
    localStorage.setItem("state", JSON.stringify(state));
  }, [state]);

  return (
    <AppState.Provider value={state}>
      <AppStateSet.Provider value={setState}>{children}</AppStateSet.Provider>
    </AppState.Provider>
  );
};

export default AppStateProvider;

The initial render should be the same on the client and server. Anytime you violate this rule, you get a hydration error, like in your case, where there will be no localStorage on the server, and it's present on the browser, leading to a different initial state.

You should move the logic of instantiating the theme inside an useEffect:

const AppStateProvider = ({ children }: Props) => {
  const [state, setState] = useState<AppState | null>(null);

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

  useEffect(() => {
    setState(initalFromLocalStorage());
  }, []);

  // This is so you don't show anything before the context is fully set. You could also set a loader or something.
  if (!state) {
    return null;
  }

  return (
    <AppState.Provider value={state}>
      <AppStateSet.Provider value={setState}>{children}</AppStateSet.Provider>
    </AppState.Provider>
  );
};

And at this point, you can simplify initalFromLocalStorage as below:

const initalFromLocalStorage = () => {
  const result = localStorage.getItem("state");

  if (result) {
    return JSON.parse(result) as AppState;
  }

  return initialState;
};