مشكلة في next js + typescript

هذا مثال على كيفية القيام بذلك في react :

import React, { useState } from 'react';

function LikeButton() {
  // استخدام useState لتتبع حالة الإعجاب
  const [liked, setLiked] = useState(false);

  // دالة للتعامل مع النقر على الزر
  const handleLike = async () => {
    // إذا كان المستخدم قد قام بالإعجاب مسبقًا
    if (liked) {
      // قم بإلغاء الإعجاب عن طريق الاتصال بمسار /unlike في الخلفية
      await fetch('/unlike', { method: 'POST' });
    } else {
      // قم بالإعجاب عن طريق الاتصال بمسار /like في الخلفية
      await fetch('/like', { method: 'POST' });
    }
    // تحديث حالة الإعجاب
    setLiked(!liked);
  };

  return (
    // إنشاء زر وتعيين handleLike كدالة للتعامل مع النقر عليه
    <button onClick={handleLike}>
      {/* تغيير نص الزر استنادًا إلى حالة الإعجاب */}
      {liked ? 'Unlike' : 'Like'}
    </button>
  );
}

أولاً عليك بنشاء ملف تحكم (Controller) أو ملف خدمة (Service) في مجلد pages/api بمشروع Next.js واسمه يمكن أن يكون likes.ts.

ثم كتابة دالتين للطلبات POST واحدة لإضافة الـ "like" والأخرى لإزالته، وإليك المثال التالي لملف likes.ts:

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { like } = req.body;

    if (like) {
      // إضافة "like" بناءً على قيمة `like`
      // انفذ الكود الخاص بإضافة "like" هنا
      res.status(200).json({ message: 'تمت إضافة الـ "like" بنجاح' });
    } else {
      // إزالة "like" بناءً على قيمة `like`
      // انفذ الكود الخاص بإزالة "like" هنا
      res.status(200).json({ message: 'تمت إزالة الـ "like" بنجاح' });
    }
  } else {
    res.status(405).json({ message: 'الطلب غير مدعوم' });
  }
}

وفي صفحتك التي تحتوي على زر الـ "like"، قم بإضافة حالة لتتبع حالة الـ "like" وإجراء طلب POST بناءً على الحالة.

مثال:

import { useState } from 'react';

export default function LikeButton() {
  const [liked, setLiked] = useState(false);

  const handleLike = () => {
    fetch('/api/likes', {
      method: 'POST',
      body: JSON.stringify({ like: !liked }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data.message);
        setLiked(!liked);
      })
      .catch((error) => {
        console.error('حدث خطأ:', error);
      });
  };

  return (
    <button onClick={handleLike}>
      {liked ? 'إزالة الـ "like"' : 'إضافة الـ "like"'}
    </button>
  );
}

ثم تحديث ملفات الطرق (routes) في مشروع Next.js (مثل pages/index.tsx) لتضمين الزر الخاص بالـ "like" في الصفحة:

import LikeButton from '../components/LikeButton';

export default function HomePage() {
  return (
    <div>
      <h1>صفحة الموقع</h1>
      <LikeButton />
    </div>
  );
}

بالطبع، يمكنني مساعدتك في إضافة خاصية الإعجاب (Like) إلى صفحتك الأمامية. هنا خطوات توضح كيفية القيام بذلك:

• 1. قم بإنشاء زر Like في الواجهة الأمامية: أضف زرًا أو أي عنصر آخر (مثل رمز أيقونة) للتمثيل البصري لزر Like على صفحتك. يمكنك استخدام HTML و CSS لإنشاء الزر وتصميمه وتحديد العنصر الذي ستتفاعل معه.
• قم بكتابة دالة في JavaScript للتفاعل مع زر Like: قم بإنشاء دالة في JavaScript تتفاعل مع زر Like عند النقر عليه. يمكنك استخدام AJAX أو Fetch API لإرسال طلب للخادم لتنفيذ الإجراء المطلوب (مثلاً إضافة Like أو إزالته).
• ربط الزر مع الدالة: ربط الزر Like بالدالة التي قمت بكتابتها في الخطوة السابقة. يُمكنك القيام بذلك عن طريق إضافة حدث "onclick" إلى العنصر الذي يمثل الزر، وتعيينه ليستدعي الدالة التي تتفاعل مع الزر.
• تحديث واجهة المستخدم عند النجاح: بعد استجابة الخادم بنجاح، قم بتحديث واجهة المستخدم لعرض التغييرات. على سبيل المثال، يمكنك تغيير رمز الزر أو الأيقونة بناءً على حالة الإعجاب (Like) الحالية.

هذه هي الخطوات العامة لإضافة خاصية الإعجاب (Like) إلى واجهة المستخدم الخاصة بك. قد يختلف التنفيذ بناءً على تفاصيل الواجهة الأمامية التي تستخدمها (مثل React أو Angular أو Vue.js) وكيفية تنظيم الكود الحالي.

لإضافة نظام الـ like/unlike في Next.js باستخدام TypeScript، يمكنك استخدام الحالة (state) في React ودالة الـ useEffect() لجلب وحفظ حالة الـ like عند النقر على الزر.

في الصفحة التي تريد إضافة الخاصية فيها، يمكنك استخدام الحالة (state) باستخدام useState() وتحديثها عند النقر على الزر باستخدام دالة setState()، كما يلي:

import { useState, useEffect } from "react";

const Page = () => {
  // تحديد حالة الـ like بشكل افتراضي
  const [liked, setLiked] = useState(false);

  // دالة تنفذ عند النقر على الزر
  const handleLikeClick = async () => {
    // إذا كان الـ like مفعل، استخدام الـ endpoint /unlike
    if (liked) {
      const response = await fetch("/api/unlike", { method: "POST" });
      if (response.ok) {
        setLiked(false);
      }
    } else { // إذا كان الـ like غير مفعل، استخدام الـ endpoint /like
      const response = await fetch("/api/like", { method: "POST" });
      if (response.ok) {
        setLiked(true);
      }
    }
  };

  // استخدام دالة useEffect() لجلب حالة الـ like من الـ endpoint عند تحميل الصفحة
  useEffect(() => {
    const fetchLikeStatus = async () => {
      const response = await fetch("/api/like-status");
      if (response.ok) {
        const data = await response.json();
        setLiked(data.liked);
      }
    };

    fetchLikeStatus();
  }, []);

  return (
    <div>
      <button onClick={handleLikeClick}>{liked ? "Unlike" : "Like"}</button>
    </div>
  );
};

export default Page;

في هذا المثال، يتم استخدام الحالة (state) liked لتخزين حالة الـ like ويتم تحديثها عند النقر على الزر باستخدام دالة handleLikeClick() التي تقوم بإرسال طلب POST إلى الـ endpoint المناسب (like أو unlike) وتحديث حالة الـ like بناءً على الرد الذي تم استلامه.

يتم استخدام دالة useEffect() لجلب حالة الـ like من الـ endpoint "/api/like-status" عند تحميل الصفحة، ويتم تحديث حالة الـ like باستخدام دالة setLiked().

يمكنك تغيير المسار واسم الـ endpoint حسب احتياجاتك، وتأكد من إنشاء الملفات اللازمة في مجلد pages/api (مثل api/like.ts و api/unlike.ts) لتنفيذ الـ endpoints.