Fix: Hydration Failed Error in Next.js

This error happens because server-rendered HTML doesn’t match the client-rendered HTML. Since you’re using Next.js App Router, here’s how to fix it.

---

✅ Solution 1: Ensure Chat is a Client Component

Your Chat.tsx component should explicitly declare itself as a client component using "use client";.
Make sure your app/components/Chat.tsx file starts like this:

"use client";  // ✅ Forces Next.js to treat this as a client-side component

import { useState } from "react";

export default function Chat() {
  const [messages, setMessages] = useState<{ role: string; text: string }[]>([]);
  const [input, setInput] = useState("");

  async function sendMessage() {
    if (!input.trim()) return;

    const res = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({ user_message: input }),
      headers: { "Content-Type": "application/json" },
    });

    const data = await res.json();
    setMessages([...messages, { role: "user", text: input }, { role: "ai", text: data.ai_response }]);
    setInput("");
  }

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i} className={msg.role === "user" ? "user-message" : "ai-message"}>
            {msg.text}
          </div>
        ))}
      </div>
      <div className="chat-input">
        <input 
          value={input} 
          onChange={(e) => setInput(e.target.value)} 
          placeholder="Ask me anything..."
          className="input-box"
        />
        <button onClick={sendMessage} className="send-button">Send</button>
      </div>
    </div>
  );
}

---

✅ Solution 2: Ensure Home Page is a Server Component

Your app/page.tsx should not directly use hooks like useState.

📌 If you are using client-side hooks in app/page.tsx, move them to a separate client component (like Chat.tsx).

import Chat from "./components/Chat";

export default function Home() {
  return (
    <main>
      <h1>Welcome to My AI Chatbot</h1>
      <Chat />  {/* ✅ This is now a client component */}
    </main>
  );
}

---

✅ Solution 3: Prevent Rendering Mismatches

If you use typeof window !== "undefined" or random values like Math.random() inside a server component, Next.js will rehydrate the tree incorrectly.

❌ Wrong Example

export default function Home() {
  return <p>The time is {Date.now()}</p>;  // ❌ Date.now() changes every render
}

✅ Fixed Example

export default function Home() {
  return <p>The time is {new Date().toLocaleTimeString()}</p>;  // ✅ Runs on client-side correctly
}

---

🔄 Restart the Server After Fixing

After applying the fixes, restart your Next.js server:

npm run dev

---

🎯 Final Thoughts

✅ Make sure stateful components (like Chat.tsx) are client components ("use client" at the top).
✅ Ensure server components (like page.tsx) don’t use hooks or browser-dependent logic.
✅ Restart the server and check if the hydration issue disappears.

Let me know if you need more help! 🚀