تحديث السياق Context في Next.js يظهر خطأ async/await is not yet supported in Client Components in next.js

مرحباً!

تواجه مشكلة بسبب استخدام async/await في مكونات العميل في Next.js، وهذا غير مدعوم حالياً في هذه المكونات. الخطأ ناتج عن محاولة استخدام async داخل مكون العميل (Client Component) بينما async/await مدعوم فقط في مكونات الخادم (Server Components).

شرح المشكلة

عندما تضيف 'use client' إلى مكون، فإنه يصبح مكوناً للعميل ويجب ألا يحتوي على وظائف غير مدعومة مثل async/await. في حالتك، المشكلة تحدث لأنك تستخدم async في دالة handleClick داخل مكون عميل.

الحل المقترح

لتجاوز هذا الخطأ، يجب عليك تحويل الدالة handleClick إلى دالة غير متزامنة (async) أو استخدام طرق أخرى للتعامل مع حالة غير المتزامنة. يمكنك إما التعامل مع async/await خارج مكون العميل، أو استخدام طرق غير متزامنة أخرى.

تصحيح الكود

يمكنك تعديل الكود بحيث يكون التعامل مع الحالة غير المتزامنة منفصلاً عن مكون العميل:

'use client'
import styles from '../../styles/leftMenu.module.css'
import BigLink from './BigLinks'
import { GoHomeFill, GoSearch, GoBellFill, GoChecklist } from 'react-icons/go'
import { useContext } from 'react'
import { UserContext } from '~/contexts/UserContext'
import Image from 'next/image'
import { FaUser } from 'react-icons/fa'
import { useRouter } from 'next/navigation'

export default function LeftMenu() {
  const { user, setUser } = useContext(UserContext)
  const router = useRouter()

  const handleClick = () => {
    // استخدم دالة غير متزامنة داخل handleClick ولكن لا تجعلها async
    const handleAsyncClick = async () => {
      if (user.id) {
        setUser({ id: '', username: '', image: '' })
      } else {
        router.push('authentication/login')
      }
    }

    handleAsyncClick()
  }

  return (
    <main className={styles.left_menu_container}>
      <svg
        fill="rgba(231,233,234,1.00)"
        className={styles.left_menu_logo}
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <g>
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
        </g>
      </svg>
      <ul>
        <li>
          <BigLink title="Home" page="">
            <GoHomeFill size={30} fill="white" />
          </BigLink>
        </li>
        <li>
          <BigLink title="Search" page="search">
            <GoSearch size={30} fill="white" />
          </BigLink>
        </li>
        <li>
          <BigLink title="Notifications" page="notifications">
            <GoBellFill size={30} fill="white" />
          </BigLink>
        </li>
        <li>
          <BigLink title="Lists" page="lists">
            <GoChecklist size={30} fill="white" />
          </BigLink>
        </li>
      </ul>

      <div className={styles.profile_section_wrapper}>
        <p>{user.username}</p>
        {user.image ? (
          <Image src="" alt="" />
        ) : (
          <FaUser size={30} onClick={handleClick} />
        )}
      </div>
    </main>
  )
}

في هذا الكود، قمت بفصل التعامل مع الحالة غير المتزامنة إلى دالة handleAsyncClick التي تقوم باستدعاء async/await، بينما handleClick نفسها تبقى غير متزامنة.

أتمنى أن يساعدك هذا في حل المشكلة!