Next.js Discord

Discord Forum

Prop did not match Server/Client OR Hydration

Unanswered
Eastern Carpenter bee posted this in #help-forum
Open in Discord
Eastern Carpenter beeOP
Hi guys, i'm create a project using MUI 5 + NextJS 12.3.4.
implemented translation for my texts using react-i18next 13.0.2, BUT, in all screen that i have a custom hook that change some thing, i receive a message:

Warning: Prop placeholder did not match. Server: "username" Client: "Nome de usuário"

3 Replies

Eastern Carpenter beeOP
My code:
import { useMutation } from "@tanstack/react-query";
import { useAuth } from "../context/AuthContext";
import { useForm } from "react-hook-form";
import { useTranslation } from 'react-i18next';
import './i18n';

interface FormData {
  username: string;
  password: string;
}
export default function Home() {
  const { t } = useTranslation("translation");
  const { signIn } = useAuth();

  // React-hook-form functions

  const { mutateAsync } = useMutation({
    mutationFn: async (data: FormData) => {
      return signIn(data);
    },
  });

  async function onSubmit(_data: FormData) {
    await mutateAsync(_data);
  }

  return (
    <section>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          rowGap: "1rem",
        }}
      >
        <img src="/logo.png" alt="logo da costdrivers" />

        <form
          onSubmit={handleSubmit(onSubmit)}
          style={{
            display: "grid",
            rowGap: "1rem",
            width: "500px",
          }}
        >
          <input
            id="username"
            placeholder={t("username")}
            type="text"
            {...register("username", {
              required: `${t("genericMessageErrorForInput")}`,
            })}
          />
          <input
            id="password"
            placeholder={t("password")}
            type="password"
            {...register("password", {
              required: `${t("genericMessageErrorForInput")}`,
            })}
          />
          <button
            type="submit"
            style={{ minHeight: "3rem" }}
            disabled={isSubmitting}
          >
            {!isSubmitting ? (
              t("buttonLogin")
            ) : (
              <span>carregando</span>
            )}
          </button>
        </form>
      </div>
    </section>
  );
}
The unique solution that found, force the mount component for client, BUT is a not "WORKAROUND"? This is burlate the NEXTJS?

Exemplo Workaround:
const [hasMounted, setHasMounted] = useState(false);

useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  }

 return (
 // Rest component
)
Ray
use lazy import for this component with ssr disable
https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr