Next.js هو إطار عمل React شائع يمكّن المطورين من إنشاء تطبيقات سريعة يتم عرضها بواسطة الخادم. فهو يوفر ميزات قوية خارج الصندوق، مثل إنشاء موقع ثابت (SSG)، والعرض من جانب الخادم (SSR)، ومسارات واجهة برمجة التطبيقات (API). في هذا الدليل، سنتعرف على عملية إنشاء أول تطبيق Next.js، مع التركيز على المفاهيم الأساسية والأمثلة العملية.

1. إعداد مشروع Next.js الخاص بك

للبدء في استخدام Next.js، تحتاج إلى تثبيت Node.js على جهازك. بمجرد إعداد Node.js، يمكنك إنشاء تطبيق Next.js جديد باستخدام الأمر التالي:

npx create-next-app my-next-app

يقوم هذا الأمر بإنشاء دليل جديد يسمى my-next-app يحتوي على كافة الملفات والتبعيات الضرورية لبدء تطبيق Next.js.

2. التنقل في هيكل المشروع

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

cd my-next-app

داخل دليل تطبيقي التالي، ستجد بنية مشابهة لما يلي:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

دليل الصفحات هو المكان الذي ستنشئ فيه صفحات تطبيقك، بينما الدليل العام مخصص للأصول الثابتة.

3. إنشاء صفحتك الأولى

يستخدم Next.js نظام توجيه قائم على الملفات. لإنشاء صفحة جديدة، ما عليك سوى إضافة ملف JavaScript جديد داخل دليل الصفحات. على سبيل المثال، قم بإنشاء ملف باسم about.js:

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    

      
About Page
      
This is the about page of my first Next.js application!
      Go back home
    
  );
}

في هذا المثال، أنشأنا صفحة حول بسيطة واستخدمنا مكون الرابط للانتقال مرة أخرى إلى الصفحة الرئيسية.

4. تعديل الصفحة الرئيسية

افتح ملف Index.js في دليل الصفحات. يمثل هذا الملف الصفحة الرئيسية لتطبيقك. ويمكنك تعديله كالتالي:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    

      
Welcome to My Next.js App
      

        This is my first application built with Next.js.{' '}
        Learn more about me
      
    
  );
}

هنا، أضفنا بعض التصميم البسيط ورابطًا إلى صفحة "حول".

5. إضافة أنماط إلى التطبيق الخاص بك

يدعم Next.js وحدات CSS الجاهزة. لتصميم مكوناتك، يمكنك إنشاء وحدة CSS في دليل الأنماط. على سبيل المثال، قم بإنشاء ملف باسم Home.module.css:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

بعد ذلك، قم باستيراد وحدة CSS هذه إلى صفحة Index.js الخاصة بك كما هو موضح في القسم السابق.

6. جلب البيانات باستخدام Next.js

يسهل Next.js جلب البيانات باستخدام getStaticProps لإنشاء موقع ثابت أو getServerSideProps للعرض من جانب الخادم. على سبيل المثال، لجلب البيانات على الصفحة الرئيسية، يمكنك تعديل ملف Index.js مثل هذا:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    

      
Welcome to My Next.js App
      

        {posts.map(post => (
          
{post.title}
        ))}
      
  );
}

في هذا الكود، نقوم بجلب قائمة المنشورات من واجهة برمجة التطبيقات العامة ونعرضها على الصفحة الرئيسية.

7. إنشاء مسارات API

يسمح لك Next.js بإنشاء مسارات API في دليل الصفحات/api. يمكن استخدام هذه المسارات لبناء وظائف الواجهة الخلفية لديك. على سبيل المثال، قم بإنشاء ملف باسم hello.js في دليل الصفحات/api:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

يمكنك الوصول إلى مسار واجهة برمجة التطبيقات هذا بالانتقال إلى http://localhost:3000/api/hello.

8. نشر تطبيق Next.js الخاص بك

بمجرد أن يصبح تطبيقك جاهزًا، يمكنك نشره بسهولة. Vercel هو نظام الاستضافة الموصى به لتطبيقات Next.js. يمكنك نشر تطبيقك باتباع الخطوات التالية:

1. قم بإنشاء حساب Vercel إذا لم يكن لديك حساب.

2. تثبيت Vercel CLI عالميًا:
   

   npm install -g vercel
   

3. قم بتشغيل الأمر التالي في دليل المشروع الخاص بك:
   

   vercel
   

4. اتبع المطالبات لنشر التطبيق الخاص بك.

9. إضافة التوجيه الديناميكي

يدعم Next.js التوجيه الديناميكي باستخدام الأقواس. على سبيل المثال، إذا كنت تريد إنشاء صفحة منشور مدونة ديناميكية، فيمكنك إنشاء ملف باسم [id].js في دليل الصفحات/المشاركات:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return 
Post: {id}
;
}

يمكنك الآن الوصول إلى مشاركة معينة عن طريق الانتقال إلى /posts/1، /posts/2، وما إلى ذلك.

10. تنفيذ الأنماط العالمية

إذا كنت تريد تطبيق الأنماط العامة على تطبيقك، فيمكنك القيام بذلك عن طريق إنشاء ملف باسم _app.js في دليل الصفحات:

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return ;
}

بعد ذلك، قم بإنشاء ملف globals.css في دليل الأنماط وأضف أنماطك العامة:

/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

11. استخدام متغيرات البيئة

يدعم Next.js متغيرات البيئة لتخزين المعلومات الحساسة. يمكنك إنشاء ملف .env.local في جذر مشروعك وإضافة المتغيرات الخاصة بك:

API_URL=https://example.com/api

يمكنك بعد ذلك الوصول إلى هذا المتغير في تطبيقك باستخدامprocess.env:

// Example usage in a component
const apiUrl = process.env.API_URL;

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

Next.js هو أكثر من مجرد إطار عمل؛ إنها أداة قوية يمكنها تحسين تجربة تطوير الويب لديك بشكل كبير. تتيح لك ميزاته المضمنة، مثل إنشاء الموقع الثابت (SSG) والعرض من جانب الخادم (SSR)، إنشاء تطبيقات سريعة وسهلة الاستخدام ومُحسّنة للأداء وتحسين محركات البحث.

الخطوات التالية في رحلتك إلى Next.js

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

البرامج الوسيطة هي ميزة قوية تسمح لك بتوسيع وظائف التطبيق الخاص بك عن طريق إضافة منطق مخصص قبل اكتمال الطلب. وهذا يعني أنه يمكنك التعامل مع كائنات الطلب والاستجابة، أو مصادقة المستخدمين، أو حتى إدارة عمليات إعادة التوجيه بسلاسة.

بعد ذلك، سنستكشف إنشاء الموقع الثابت (SSG). تعمل هذه التقنية على عرض الصفحات مسبقًا في وقت الإنشاء، مما يسمح بسرعات تحميل سريعة وتحسين أداء تحسين محركات البحث. من خلال فهم كيفية الاستفادة من SSG، يمكنك إنشاء تطبيقات ليست ديناميكية فحسب، بل أيضًا فعالة بشكل لا يصدق.

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

تابعني ونحن نبدأ هذه الرحلة المثيرة نحو الإمكانات المتقدمة لـ Next.js. باستخدام هذه الأدوات المتاحة لك، ستتمكن من إنشاء تطبيقات قوية وعالية الأداء ومتميزة حقًا. ترقبوا منشورنا القادم!

يمكنك قراءة هذا المنشور أيضًا على:

مقدمة إلى Next.js: بناء تطبيقك الأول

Next.js هو إطار عمل React شائع يمكّن المطورين من إنشاء تطبيقات سريعة يتم عرضها بواسطة الخادم. فهو يوفر ميزات قوية خارج الصندوق!

salmaniyad.hashnode.dev

تجدني على:

سلمان اياد · جيثب

مهندس أنظمة كمبيوتر | مطور ويب. لدى سلمان إياد 31 مستودعًا متاحًا. اتبع الكود الخاص بهم على GitHub.

github.com