Fix ActivityFeed hydration error: Move localStorage read to useEffect to prevent server/client mismatch

app/components/ActivityFeed.tsx

@@ -50,30 +50,34 @@ interface StatusData {
 }
 
 export default function ActivityFeed() {
+  const [mounted, setMounted] = useState(false);
   const [data, setData] = useState<StatusData | null>(null);
   const [isExpanded, setIsExpanded] = useState(true);
   const [isMinimized, setIsMinimized] = useState(false);
   const [hasActivity, setHasActivity] = useState(false);
-  const [isTrackingEnabled, setIsTrackingEnabled] = useState(() => {
-    // Check localStorage for tracking preference
+  // Initialize with default value to prevent hydration mismatch
+  const [isTrackingEnabled, setIsTrackingEnabled] = useState(true);
+  const [quote, setQuote] = useState<{
+    content: string;
+    author: string;
+  } | null>(null);
+
+  // Load tracking preference from localStorage after mount to prevent hydration mismatch
+  useEffect(() => {
+    setMounted(true);
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("activityTrackingEnabled");
-        return stored !== "false"; // Default to true if not set
+        setIsTrackingEnabled(stored !== "false"); // Default to true if not set
       } catch (error) {
         // localStorage might be disabled
         if (process.env.NODE_ENV === 'development') {
           console.warn('Failed to read tracking preference:', error);
         }
-        return true; // Default to enabled
+        setIsTrackingEnabled(true); // Default to enabled
       }
     }
-    return true;
-  });
-  const [quote, setQuote] = useState<{
-    content: string;
-    author: string;
-  } | null>(null);
+  }, []);
 
   // Fetch data every 30 seconds (optimized to match server cache)
   useEffect(() => {
@@ -1456,6 +1460,9 @@ export default function ActivityFeed() {
     }
   };
 
+  // Don't render until mounted to prevent hydration mismatch
+  if (!mounted) return null;
+
   // Don't render if tracking is disabled and no data
   if (!isTrackingEnabled && !data) return null;
 

app/page.tsx

@@ -7,16 +7,10 @@ import Projects from "./components/Projects";
 import Contact from "./components/Contact";
 import Footer from "./components/Footer";
 import Script from "next/script";
-import dynamic from "next/dynamic";
 import ErrorBoundary from "@/components/ErrorBoundary";
+import ActivityFeed from "./components/ActivityFeed";
 import { motion } from "framer-motion";
 
-// Wrap ActivityFeed in error boundary to prevent crashes
-const ActivityFeed = dynamic(() => import("./components/ActivityFeed").catch(() => ({ default: () => null })), {
-  ssr: false,
-  loading: () => null,
-});
-
 export default function Home() {
   return (
     <div className="min-h-screen">