خطأ No router instance found. You should only use "next/router" on the client side of your app في مشروع Next.js

الخطأ ينبهك أنك تحاول استخدام next/router في جهة الخادم server-side.

السبب أن جهة الخادم server-side عبارة عن بيئة تطوير تستخدم إطار عمل Next.js وهذا الإطار لا يدعم Router لأنه يخص المتصفح،

حاول تجربة الشيفرات التالية:

import React, { useEffect } from "react";
import { useRouter } from "next/router";

const [Theme, setTheme] = useState("light");

function themeSwitcher() {
  const router = useRouter();

  useEffect(() => {
    if (Theme === "light") {
      setTheme("dark");
      console.log(Theme);
      
      router.push({
        pathname: "/layout",
        query: Theme,
      });
    } else {
      setTheme("light");
      console.log(Theme);
      
      router.push({
        pathname: "/layout",
        query: Theme,
      });
    }
    //لاحظ أن الخطاف سيعتمد على قيمة الكائن
    // Theme
  }, [Theme]); 
}

return (
  <div>
    <button onClick={themeSwitcher}>light/dark</button>
  </div>
);