العودة للمقالات

بناء تطبيق رياكت كامل باستخدام Next.js و Tailwind CSS: دليل خطوة بخطوة

Majd Muhtaseb18‏/10‏/202515 دقيقة

مقدمة

سيرشدك هذا الدليل خلال بناء تطبيق أساسي كامل باستخدام Next.js و React و Tailwind CSS. سنغطي إعداد المشروع وإنشاء المكونات وجلب البيانات وتصميم التطبيق. يركز هذا المثال على تطبيق بسيط لإدارة المهام.

المتطلبات الأساسية

• تثبيت Node.js و npm
• فهم أساسي لـ React و JavaScript

إعداد المشروع

1. إنشاء تطبيق Next.js:

   npx create-next-app my-fullstack-app
   cd my-fullstack-app
   

2. تثبيت Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

3. تكوين Tailwind CSS:

   أضف توجيهات Tailwind إلى ملف globals.css الخاص بك (الموجود في الدليل styles):

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

4. تكوين tailwind.config.js:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./app/**/*.{js,ts,jsx,tsx,mdx}",
       "./pages/**/*.{js,ts,jsx,tsx,mdx}",
       "./components/**/*.{js,ts,jsx,tsx,mdx}",
   
       // Or if using `src` directory:
       "./src/**/*.{js,ts,jsx,tsx,mdx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

إنشاء مكون بسيط

قم بإنشاء دليل components وأضف ملف TaskItem.js:

// components/TaskItem.js
import React from 'react';

const TaskItem = ({ task }) => {
  return (
    <div className="bg-white p-4 rounded shadow-md">
      <p className="text-gray-800">{task.title}</p>
    </div>
  );
};

export default TaskItem;

جلب البيانات

سنقوم بمحاكاة جلب البيانات من نقطة نهاية API. في تطبيق حقيقي ، ستستخدم واجهة برمجة تطبيقات مثل واجهة برمجة تطبيقات تعتمد على Laravel. للتبسيط ، سنستخدم بيانات ثابتة.

// pages/index.js
import TaskItem from '../components/TaskItem';

const tasks = [
  { id: 1, title: 'تعلم Next.js' },
  { id: 2, title: 'تنفيذ Tailwind CSS' },
  { id: 3, title: 'بناء تطبيق كامل' },
];

export default function Home() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">قائمة المهام</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {tasks.map((task) => (
          <TaskItem key={task.id} task={task} />
        ))}
      </div>
    </div>
  );
}

تشغيل التطبيق

قم بتشغيل خادم التطوير:

npm run dev

قم بزيارة http://localhost:3000 في متصفحك لرؤية التطبيق.

خاتمة

يقدم هذا الدليل مثالًا أساسيًا لبناء تطبيق رياكت كامل باستخدام Next.js و Tailwind CSS. يمكنك التوسع في هذا الأساس لإنشاء تطبيقات أكثر تعقيدًا عن طريق إضافة وظائف الواجهة الخلفية والمصادقة وتكامل قاعدة البيانات. تذكر استكشاف الوثائق الرسمية لـ Next.js و Tailwind CSS لمعرفة المزيد حول ميزاتهما وقدراتهما.