Tailwindcss مشكلة

وعليكم السلام.

لديك عدة مشاكل في مشروعك عند فتح المشروع على:

http://localhost:3000

يظهر الخطأ التالي:

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

وهذا لأنه ليس لديك هذا المسار /api/languages فهو غير موجود في مشروع Next.js لذا انتقل إلى app ثم أنشئ المجلدات التالية:

app/api/languages/route.js

ثم داخل ملف route.js ضع التالي:

export async function GET() {
  const data = [
    { name: "JavaScript", proficiency: "Advanced" },
    { name: "Python", proficiency: "Intermediate" },
    { name: "C++", proficiency: "Basic" },
  ];

  return Response.json(data);
}

يمكنك التأكد من أن الخطأ زال إذا ظهرت لك بيانات JSON عند التوجه إلى:

http://localhost:3000/api/languages

ومنه سيعمل الكود في <About /> بدون خطأ.

أيضا في ملف components/MyServices.jsx بعض كلاسـات Tailwind مثل:

• cursor-pointer
• hover:underline
• hover:text-main-color

هي لا تعمل، والسبب هو أنّه في مشروع Next.js الذي يستخدم App Router أي مجلد app/ بدل pages/ ومنه فجميع المكونات بدون "use client" تعتبر Server Components وكما نعلم فإنّ Server Components لا تدعم التفاعلات مع المستخدم مباشرة، لذلك كلاسـات مثل hover: أو cursor-pointer لا تطبق ومنه في أعلى الملف يجب إضافة:

"use client"

ليصبح الكود كالتالي:

'use client'; 

import React from "react";
import Image from "next/image";
import Link from "next/link";

function MyServices() {
  return (
    <div className="p-8">
      <h1 className="text-6xl font-bold my-10">My Services</h1>
      <div className="flex items-center flex-col md:flex-row justify-between gap-10">
        <div className="bg-white/30 -z-10 h-96 max-w-[350px] rounded-2xl p-6">
          <Image
            src="/front-end-project.webp"
            alt="Service 1"
            className="h-44 rounded-2xl"
            width={500}
            height={500}
          />
          <p className="user-select-none text-main-secondary-color font-bold cursor-pointer hover:underline hover:text-main-color">
            Project Link
          </p>
          <Link
            href="/"
            className="text-main-secondary-color font-bold cursor-pointer hover:underline hover:text-main-color"
          >
            Github Link
          </Link>
        </div>
      </div>
    </div>
  );
}

export default MyServices;

ولكي يتم استخدام هذا المكون يجب تعديل ملف app/services/page.js لاستعمال المكون كالتالي:

'use client';

import MyServices from "../components/MyServices";

export default function Services() {
  return <MyServices />;
}

وعند فتح الرابط على:

http://localhost:3000/services

ستجد أنه يعمل: