إنشاء قالب Next.js Starter: تسريع تطوير تطبيقات React بكفاءة

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

ما هو Next.js؟

Next.js هو إطار عمل للتطبيقات من شركة Vercel يتيح لك بدء تطبيق React جديد بسرعة فائقة. تشمل بعض ميزاته الأساسية إنشاء الصفحات وجلب البيانات (data fetching)، كما أنه يسمح لك بإنشاء موقع ثابت (static site) أو استخدام العرض من جانب الخادم (server-side rendering) لتحميل تطبيقك ديناميكيًا. علاوة على ذلك، يمكنك الاستفادة من ميزاته المتقدمة مثل التوجيه (Routing) أو إنشاء واجهة برمجة تطبيقات (API) مباشرة بجانب واجهة المستخدم (UI) الخاصة بك.

ما هو قالب Starter؟

قوالب Starters هي في الأساس مستودعات Git على شكل قوالب (templates) تتيح لك إنشاء تطبيق مهيأ مسبقًا بسهولة. لا يوجد شيء “خاص” بالضرورة في قالب Starter. في جوهره، هو تطبيق Next.js تم إعداده بطريقة معينة وعادة ما يكون معمّمًا بحيث يمكن لأي شخص استخدامه. على سبيل المثال، إذا كنت تميل إلى بناء العديد من التطبيقات بنفس الطريقة في كل مرة، فقد تضطر إلى تكرار نفس خطوات التهيئة في كل مرة تنشئ فيها تطبيقًا جديدًا. بدلاً من ذلك، يمكنك إنشاء قالب Starter يكون نقطة البداية لمشاريعك – وهذا سيلغي الحاجة إلى تكرار تلك الخطوات الأولية في كل مرة.

ماذا سنبني في هذا الدليل؟

سنقوم ببناء قالب Next.js Starter أساسي يتيح لك أو لأي شخص آخر إنشاء مشروع جديد بسرعة وسهولة باستخدام هذا القالب كنقطة انطلاق. بينما لن نتعمق كثيرًا في الميزات، حيث أن الهدف هنا هو التعرف على قوالب Starters، سنختبر هذا عن طريق إضافة Sass إلى Next.js حتى يتمكن أي شخص من البدء بسهولة بقوة CSS الخارقة. يمكنك الاطلاع على القالب على GitHub: github.com/colbyfayock/next-sass-starter.

إنشاء قالب Next.js Starter جديد

للبدء في إنشاء قالب Starter، نحتاج إلى البدء بتطبيق Next.js. يمكننا القيام بذلك عن طريق تشغيل الأمر التالي في أي دليل ترغب في إنشاء التطبيق فيه:

yarn create next-app
# or
npx create-next-app

بمجرد تشغيل هذا الأمر، سيطلب منك Next.js اسم المشروع. بينما يمكنك استخدام ما يحلو لك، فإن قوالب Next.js Starters عادة ما تتبع نمط تسمية next-[name]-starter. لذلك، بما أننا ننشئ قالب Sass Starter، يمكننا تسميته next-sass-starter.

بمجرد أن يقوم Next.js بتثبيت جميع التبعيات (dependencies)، ستكون جاهزًا للانتقال إلى هذا المجلد وتشغيل الأمر لبدء خادم التطوير الخاص بك.

yarn dev
# or
npm run dev

وبمجرد بدء تشغيل خادم التطوير، يجب أن نكون جاهزين للانطلاق!

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

yarn create next-app [project-name] -e [GitHub URL]
# or
npx create-next-app [project-name] -e [GitHub URL]

بعد تشغيل ذلك، يجب أن يكون لديك دليل جديد يحتوي على مشروع تم إنشاؤه من قالب Starter الخاص بك مع تثبيت جميع التبعيات. لكننا نريد أن نفعل أكثر من ذلك. هدفنا هو إضافة ميزات تساعد في بدء تشغيل تطبيق بأكثر من الإعدادات الافتراضية، لذا دعنا نضيف Sass. تابع التغييرات (commit)!

إضافة Sass إلى قالب Next.js Starter

ملاحظة: في مثالنا، سنقوم بإنشاء قالب Sass starter كما قد يوحي الاسم أعلاه. لا تتردد في إضافة أي ميزات تريدها في هذه المرحلة، سواء كانت تتضمن Sass أم لا. تذكر – الهدف هنا هو توفير شيء يمكننا استخدامه عند إنشاء مشروع جديد باستخدام هذا القالب.

بعد ذلك، نريد بالفعل إضافة Sass إلى مشروعنا. للبدء، نريد تثبيت sass كـ تبعية (dependency):

yarn add sass
# or
npm install sass

بعد ذلك، نظرًا لأن Next.js يبحث بالفعل عن امتداد الملف .scss، يمكننا ببساطة تحديث ملفي CSS الخاصين بنا ضمن دليل styles إلى .scss. لذا، قم بتغيير الملفات التالية:

styles/globals.css => styles/globals.scss
styles/Home.module.css => styles/Home.module.scss

بعد ذلك، نحتاج إلى إعداد عبارات الاستيراد (import statements) لدينا للتعرف على امتدادات ملفاتنا الجديدة. في ملف pages/_app.js، قم بتحديث استيراد الأنماط (styles import) في الأعلى إلى:

import '../styles/globals.scss'

وفي ملف pages/index.js، قم بتحديث استيراد الأنماط إلى:

import styles from '../styles/Home.module.scss'

في هذه المرحلة، يمكنك بدء خادم التطوير الخاص بك ويجب أن نرى صفحة Next.js الافتراضية.

لرؤية Sass الخاص بنا قيد التنفيذ، يمكننا تحديث بعض فئاتنا (classes) لاستخدام الأنماط المتداخلة (nested styles) بدلاً من المحددات الفردية (individual selectors). قم بتحديث جميع محددات .footer داخل ملف styles/Home.module.scss إلى ما يلي:

.footer {
      width: 100%;
      height: 100px;
      border-top: 1px solid #eaeaea;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        margin-left: 0.5rem;
      }
      a {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

يمكنك استخدام نفس بنية التداخل لتحديث .title و .card. يمكننا أيضًا إضافة ما يلي إلى أعلى ملف styles/Home.module.scss الخاص بنا:

$color-primary: #0070f3;

وقم بتحديث جميع حالات اللون في هذا الملف من #0070f3 إلى $color-primary:

.title {
      ...
      a {
        color: $color-primary;
      }
    }

إذا قمت بإعادة تحميل الصفحة، فلن يتغير شيء. ولكن قم بتحديث هذا المتغير إلى لونك المفضل مثل:

$color-primary: blueviolet;

والآن تتغير جميع الألوان.

أخيرًا، بما أن لدينا الآن قالب Sass starter، دعنا نحدث عنوان الصفحة. استبدل “Welcome to Next.js!” في ملف pages/index.js بما يلي:

<h1 className={styles.title}>
      <a href="https://nextjs.org">Next.js</a> Sass Starter
    </h1>

والآن أصبح لدينا نقطة انطلاق لـ Sass!

على غرار ما سبق، يمكنك اختبار ذلك عن طريق إنشاء مشروع جديد باستخدام القالب الخاص بك بمجرد أن تكون جميع التغييرات على GitHub.

yarn create next-app [project-name] -e [GitHub URL]
# or
npx create-next-app [project-name] -e [GitHub URL]

تابع التغييرات (commit)!

توثيق قالب Next.js Starter لإعداد سهل

يمكن القول إن أحد أهم الأمور المتعلقة بقالب Starter هو التوثيق (documentation). قد لا يكون الأمر بهذه الأهمية إذا كنت تستخدمه بنفسك فقط. ولكن إذا كنت تريد أن يستخدمه أشخاص آخرون، فأنت تريد منهم معرفة كيفية استخدامه وإلا سيواجهون صعوبات ويصابون بالإحباط.

الجزء الأكثر أهمية هو إعداد قالب Starter. يُعد إعداد القالب الخاص بك في مستودع GitHub خطوة أولى رائعة. ولكن إذا أراد شخص ما استخدام هذا القالب، فسيتعين عليه استنساخ (clone) أو تنزيل (download) هذا المستودع ثم إزالة سجل Git. بدلاً من ذلك، يمكنك إضافة الأمر الذي استخدمناه أعلاه في ملف README.md الخاص بك لتقديم تعليمات للأشخاص حول كيفية البدء بسرعة، مثل:

## Getting Started

Run the following command to create a new project with this Starter:

yarn create next-app [project-name] -e https://github.com...
or
npx create-next-app [project-name] -e https://github.com...

سيمنع هذا الأشخاص الذين قد لا يفهمون كيفية القيام ببعض هذه الأمور يدويًا من الوقوع في مأزق. من المهم أيضًا إضافة أي توثيق لخيارات التهيئة (configuration options) التي أضفتها. إذا كنت تضيف بعض المتغيرات التي تسمح لك بتغيير بعض الميزات على مستوى الموقع، فتأكد من إضافة ملاحظات حولها. في النهاية، تريد أن يفهم الناس كيفية استخدام الميزات التي أضفتها لتسهيل حياتهم. إذا لم يفهموها، فقد يقومون ببساطة بإزالة هذا الكود والقيام بذلك يدويًا. في النهاية، يتعلق إنشاء ونشر قالب Starter بتسهيل حياة الناس. سواء كنت أنت تعود إلى قالب Starter الخاص بك بعد بضعة أشهر أو مجموعة من الأشخاص الجدد الذين يتطلعون إلى أن يصبحوا منتجين، فإنك تمنحهم تجربة مطور أفضل من خلال إضافة توثيق جيد.

اعتبارات إضافية عند بناء قوالب Next.js Starter

تعميم الميزات وإضافة خيارات التهيئة لقالب Next.js Starter

تُعد إضافة الميزات طريقة رائعة لجعل قالب Starter أكثر احتمالاً للاستخدام. إذا استخدمت قالب Starter لإنشاء مدونة جديدة، فسأحبذ لو أن هذا القالب يتضمن اسمي كمؤلف وربما حتى صفحة “من أنا”. لكن ما لا أريده هو الاضطرار إلى استبدال اسم شخص آخر 100 مرة في جميع أنحاء الكود لتحديث مشروعي الخاص. ناهيك عن أن رؤية هذا الاسم على القالب قد يجعلني أشعر وكأنها مدونتهم بدلاً من قالب يمكنني استخدامه لمشروعي.

فكر في البدء باستخدام اسم عام في جميع أنحاء المشروع. بدلاً من استخدام “مدونة Colby Fayock” في جميع أنحاء القالب، اجعلها “مدونتي”، مما سيجعلها أقل شخصية بالنسبة للمنشئ بالنسبة للشخص الذي يستخدم القالب. أضف أيضًا بعض خيارات التهيئة. من الأسهل بكثير أن تكون قادرًا على تحديث متغير واحد يجعل مشروعي يتضمن “Colby Fayock” بدلاً من “مدونتي” بدلاً من البحث في جميع الملفات لإجراء هذا التغيير يدويًا.

اختر بعناية أين تكون متحيزًا (Opinionated)

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

يمكنك إنشاء قوالب Starters متحيزة، ولكن اختر بحكمة أين تضع هذه التحيزات. سيجعل هذا عملك قابلاً للاستخدام من قبل مجموعة أكبر من الأشخاص الذين يرغبون في أن يكونوا منتجين. إذا كنت ترغب في إنشاء شيء متحيز للغاية، ففكر في تسميته شيئًا مختلفًا واستخدام الأداة كجزء من الاسم. على سبيل المثال، يمكنني إنشاء قالب Sass Starter متحيز يسمى “Colby’s Sassy Next.js Starter”.

هل أنشأت قالب Starter جديدًا؟ شاركه معنا على Twitter!

الخلاصة التقنية

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