إعداد بيئة التطوير المتقدمة: تثبيت Next.js مع TypeScript و Tailwind CSS

ماذا سنتعلم اليوم؟ سنقوم بإعداد بيئة تطوير Next.js متكاملة باستخدام TypeScript لضمان الأمان والمرونة، و Tailwind CSS لتسريع عملية التنسيق.

1. تهيئة مشروع Next.js جديد

نبدأ بإنشاء مشروع Next.js جديد مع تفعيل TypeScript و Tailwind CSS بشكل مباشر باستخدام أمر create-next-app.

ملاحظة تقنية: سيقوم هذا الأمر بإنشاء مجلد المشروع، تثبيت التبعيات، وإعداد الملفات الأساسية لـ Next.js و TypeScript و Tailwind CSS.

npx create-next-app@latest my-nextjs-app --typescript --tailwind --eslint
# شرح:
# npx create-next-app@latest: لتشغيل أحدث إصدار من أداة إنشاء تطبيقات Next.js.
# my-nextjs-app: اسم مجلد المشروع الذي سيتم إنشاؤه.
# --typescript: لتفعيل دعم TypeScript في المشروع.
# --tailwind: لتفعيل دعم Tailwind CSS في المشروع.
# --eslint: لتفعيل دعم ESLint لتحليل الكود وضمان جودته.

بعد انتهاء التثبيت، انتقل إلى مجلد المشروع:

cd my-nextjs-app
# شرح:
# cd: أمر لتغيير المجلد الحالي.
# my-nextjs-app: اسم المجلد الذي أنشأناه للتو.

2. تخصيص إعدادات Tailwind CSS (اختياري)

على الرغم من أن create-next-app يقوم بإعداد Tailwind CSS تلقائياً، قد تحتاج إلى تخصيص بعض الإعدادات في ملف tailwind.config.ts.

افتح ملف tailwind.config.ts في جذر مشروعك وتأكد من محتواه أو قم بتعديله حسب الحاجة.

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config
// شرح:
// content: يحدد المسارات التي سيقوم Tailwind CSS بمسحها للعثور على فئات CSS المستخدمة لتضمينها في البنية النهائية.
// theme.extend: يسمح بتوسيع الثيم الافتراضي لـ Tailwind CSS بدلاً من استبداله بالكامل.
// plugins: لإضافة مكونات إضافية لـ Tailwind CSS.

ملاحظة تقنية: تأكد من أن مسارات content تغطي جميع المجلدات التي ستحتوي على ملفات تستخدم فئات Tailwind CSS، مثل app و components و pages (إذا كنت تستخدم Pages Router).

3. إنشاء صفحة ومكون بسيط (باستخدام App Router)

لنقم بإنشاء مكون بسيط وصفحة لعرضه للتأكد من أن كل شيء يعمل بشكل صحيح. سنستخدم App Router الذي هو التوجه الافتراضي في Next.js.

أولاً، سنقوم بتعديل ملف app/page.tsx الافتراضي.

// app/page.tsx
import Image from 'next/image'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gradient-to-br from-blue-500 to-purple-600 text-white">
      {/* شرح: استخدام فئات Tailwind CSS لتنسيق الصفحة */}
      <h1 className="text-5xl font-bold mb-8 animate-fade-in-down">
        أهلاً بك في Next.js مع TypeScript و Tailwind CSS!
      </h1>
      <p className="text-xl mb-12 text-center max-w-2xl opacity-0 animate-fade-in-up animation-delay-500">
        هذه بيئة تطوير متكاملة جاهزة لبناء تطبيقات ويب حديثة وقوية.
      </p>

      <div className="flex space-x-4">
        <button className="px-6 py-3 bg-white text-blue-600 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 transform hover:scale-105">
          ابدأ التعلم
        </button>
        <button className="px-6 py-3 border border-white text-white rounded-lg shadow-lg hover:bg-white hover:text-blue-600 transition duration-300 transform hover:scale-105">
          المستندات
        </button>
      </div>

      {/* مثال على إضافة بعض الرسوم المتحركة البسيطة بواسطة Tailwind JIT */}
      <style jsx>{<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">
        @keyframes fade-in-down {
          from {
            opacity: 0;
            transform: translateY(-20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        @keyframes fade-in-up {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-fade-in-down {
          animation: fade-in-down 0.8s ease-out forwards;
        }
        .animate-fade-in-up {
          animation: fade-in-up 0.8s ease-out forwards;
        }
        .animation-delay-500 {
          animation-delay: 0.5s;
        }
      </code>}</style>
    </main>
  )
}

ملاحظة تقنية: في Next.js App Router، يتم تعريف الصفحات كملفات page.tsx داخل المجلدات. ملف app/page.tsx هو الصفحة الرئيسية.

4. تشغيل خادم التطوير

الآن، بعد إعداد المشروع وتعديل الصفحة الرئيسية، يمكننا تشغيل خادم التطوير لرؤية التغييرات في المتصفح.

npm run dev
# شرح:
# npm run dev: لتشغيل خادم التطوير الخاص بـ Next.js.
# سيقوم هذا الأمر بتشغيل التطبيق على http://localhost:3000 افتراضياً.

الكود النهائي الكامل

هذا هو الكود الكامل لملف app/page.tsx بعد التعديلات.

// app/page.tsx
import Image from 'next/image' // استيراد مكون Image من Next.js (إذا كنت بحاجة إليه)

export default function Home() {
  return (
    // استخدام فئات Tailwind CSS لتنسيق الصفحة الرئيسية
    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gradient-to-br from-blue-500 to-purple-600 text-white">
      <h1 className="text-5xl font-bold mb-8 animate-fade-in-down">
        أهلاً بك في Next.js مع TypeScript و Tailwind CSS!
      </h1>
      <p className="text-xl mb-12 text-center max-w-2xl opacity-0 animate-fade-in-up animation-delay-500">
        هذه بيئة تطوير متكاملة جاهزة لبناء تطبيقات ويب حديثة وقوية.
      </p>

      <div className="flex space-x-4">
        <button className="px-6 py-3 bg-white text-blue-600 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 transform hover:scale-105">
          ابدأ التعلم
        </button>
        <button className="px-6 py-3 border border-white text-white rounded-lg shadow-lg hover:bg-white hover:text-blue-600 transition duration-300 transform hover:scale-105">
          المستندات
        </button>
      </div>

      {/* مثال على إضافة بعض الرسوم المتحركة البسيطة بواسطة Tailwind JIT */}
      <style jsx>{<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">
        @keyframes fade-in-down {
          from {
            opacity: 0;
            transform: translateY(-20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        @keyframes fade-in-up {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-fade-in-down {
          animation: fade-in-down 0.8s ease-out forwards;
        }
        .animate-fade-in-up {
          animation: fade-in-up 0.8s ease-out forwards;
        }
        .animation-delay-500 {
          animation-delay: 0.5s;
        }
      </code>}</style>
    </main>
  )
}

النتيجة المتوقعة

عند تشغيل الأمر npm run dev وفتح المتصفح على http://localhost:3000، ستشاهد صفحة ويب ذات خلفية متدرجة (من الأزرق إلى البنفسجي) مع عنوان كبير "أهلاً بك في Next.js مع TypeScript و Tailwind CSS!" ونص وصفي وزرين. ستظهر النصوص والأزرار بتأثيرات حركية بسيطة.

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

← السابقالفهرس