مقدمة في Next.js: إطار العمل المثالي لتطبيقات React

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

ما هو Next.js؟

Next.js هو إطار عمل React مفتوح المصدر يتيح لك بناء تطبيقات ويب سريعة وقابلة للتوسع. تم تطويره بواسطة شركة Vercel، ويوفر العديد من الميزات التي تجعل تطوير تطبيقات React أسهل وأكثر كفاءة.

مميزات Next.js

• توجيه الصفحات المستند إلى الملفات: يستخدم Next.js نظام توجيه بسيط يعتمد على هيكل الملفات في مجلد `pages`.

• عرض جانب الخادم (SSR): يمكن لـ Next.js عرض صفحات React على الخادم، مما يحسن الأداء وتحسين محركات البحث (SEO).

• التوليد الثابت (Static Generation): يمكن توليد صفحات HTML ثابتة في وقت البناء لتحسين الأداء.

• جلب البيانات: يوفر Next.js طرقًا مختلفة لجلب البيانات مثل `getStaticProps` و `getServerSideProps`.

• تحسين الصور: يأتي مع مكون `Image` مدمج لتحسين أداء الصور.

• دعم API Routes: يمكنك إنشاء نقاط نهاية API داخل مشروع Next.js نفسه.

إعداد مشروع Next.js

لإنشاء مشروع Next.js جديد، يمكنك استخدام الأمر التالي:

npx create-next-app my-next-app
cd my-next-app
npm run dev

هذا سينشئ مشروع Next.js جديد ويبدأ خادم التطوير المحلي على المنفذ 3000.

هيكل المشروع

بعد إنشاء المشروع، ستلاحظ الهيكل التالي:

• pages/: يحتوي على صفحات التطبيق. كل ملف في هذا المجلد يمثل مسارًا في التطبيق.

• public/: لتخزين الملفات الثابتة مثل الصور والأيقونات.

• styles/: لتخزين ملفات CSS.

• next.config.js: ملف تكوين Next.js.

• package.json: يحتوي على التبعيات وسكريبتات النظام.

إنشاء الصفحات

في Next.js، يتم إنشاء الصفحات كمكونات React في مجلد `pages`. على سبيل المثال، لإنشاء صفحة رئيسية، يمكنك إنشاء ملف `pages/index.js`:

export default function Home() {
  return (
    <div>
      <h1>مرحبًا بك في Next.js!</h1>
      <p>هذه هي الصفحة الرئيسية للتطبيق.</p>
    </div>
  );
}

التنقل بين الصفحات

للتنقل بين الصفحات، يوفر Next.js مكون `Link` الذي يتيح التنقل بين الصفحات دون إعادة تحميل الصفحة بالكامل:

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      <Link href="/">الرئيسية</Link>
      <Link href="/about">من نحن</Link>
      <Link href="/contact">اتصل بنا</Link>
    </nav>
  );
}

جلب البيانات

Next.js يوفر عدة طرق لجلب البيانات:

# getStaticProps

تستخدم لجلب البيانات في وقت البناء:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function Page({ data }) {
  return (
    <div>
      <h1>البيانات</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

# getServerSideProps

تستخدم لجلب البيانات في كل طلب:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

API Routes

يمكنك إنشاء نقاط نهاية API داخل مشروع Next.js عن طريق إنشاء ملفات في مجلد `pages/api`:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'مرحبًا بالعالم!' });
}

الخلاصة

Next.js هو إطار عمل قوي لبناء تطبيقات React حديثة وسريعة. يوفر العديد من الميزات التي تجعل تطوير التطبيقات أسهل وأكثر كفاءة، مثل توجيه الصفحات المستند إلى الملفات، وعرض جانب الخادم، والتوليد الثابت، وجلب البيانات، وتحسين الصور، ودعم API Routes.

إذا كنت تبحث عن إطار عمل لبناء تطبيقات React قابلة للتوسع وسريعة، فإن Next.js هو خيار ممتاز يستحق التجربة.