3 نماذج معمارية Next.js قابلة للتوسع

Next.js: أفضل النماذج الأولية لبناء تطبيقات ويب قابلة للتوسع

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

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

لماذا نحتاج إلى نموذج أولي؟

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

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

ما هو تطبيق Next.js القابل للتوسع؟

التطبيق القابل للتوسع هو تطبيق يمكنه التعامل مع عدد كبير من المستخدمين والطلبات. كما أنه سهل الصيانة والتوسع. من المهم إنشاء تطبيق قابل للتوسع من البداية لتجنب إعادة هيكلة الكود لاحقًا.

التوسع عامل مهم جدًا عند بناء تطبيق ويب. من المهم اختيار الأدوات والهندسة المعمارية الصحيحة لبناء تطبيق قابل للتوسع. يجب أن نتذكر دائمًا أن تطبيقنا سينمو في المستقبل، وليس فقط ليكون نفايات ندفنها في مستودع GitHub.

أفضل النماذج الأولية لبناء تطبيقات Next.js قابلة للتوسع

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

Next.js Boilerplate بواسطة alexeagleson

هذا النموذج الأولي هو نقطة انطلاق رائعة لبناء تطبيق Next.js. تم بناؤه باستخدام TypeScript ويستخدم Next.js 12. كما أنه يستخدم Tailwind CSS للأسلوب. إنه نموذج أولي رائع لبناء تطبيق ويب قابل للتوسع.

ميزات بارزة:

• Next.js 12 (يمكنك المساعدة في الترقية إلى Next.js 13 في المستودع)

• TypeScript

• قفل المحرك

• ESLint

• Prettier

• Git Hooks (Husky)

• VS Code Config

• تصحيح أخطاء VS Code

• Storybook

• قالب مكون

• فحص تعليقات الالتزام

يمكننا بسهولة بدء مشروع جديد من خلال نسخ المستودع وتشغيل الأوامر التالية:

gh repo clone alexeagleson/nextjs-fullstack-app-template
# أو
git clone git@github.com:alexeagleson/nextjs-fullstack-app-template.git
# أو
git clone https://github.com/alexeagleson/nextjs-fullstack-app-template.git
# أو يمكنك أيضًا استخدام degit إذا كنت تريد استخدام القالب دون git في البداية

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

تم إعداد جميع أنواع الفحص والتنسيق. يمكننا أيضًا استخدام تكوين VS Code لتسهيل العمل مع المشروع. كما يحتوي على تكوين Storybook يمكننا استخدامه لبناء مكوناتنا. يحتوي هذا النموذج الأولي على خطاف commit-msg يمكننا استخدامه لفحص رسالة الالتزام. يمكننا بسهولة توثيق مكوننا باستخدام Storybook.

المستودع: alexeagleson/nextjs-fullstack-app-template مدونة: كيفية إنشاء بنية قابلة للتوسع لمشروع Next.js

Next.js Boilerplate بواسطة ipenywis

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

في عالم تطوير الويب سريع الخطى اليوم، من الضروري أن يكون لديك الأدوات والأطر الصحيحة في متناول يدك. هذا هو المكان الذي يأتي فيه تطبيق Next.js مع Turborepo و Zustand و TailwindCSS و TypeScript stack - مزيج قوي من التقنيات المتطورة التي يمكن أن تجعل عملية التطوير الخاصة بك أكثر سلاسة وسرعة وكفاءة.

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

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

Zustand هي مكتبة خفيفة الوزن لإدارة الحالة تقدم نهجًا بسيطًا وبديهيًا لإدارة الحالة في تطبيقات React. يمكن أن تساعدك على الحفاظ على قاعدة الكود الخاصة بك نظيفة ومنظمة مع تسهيل العمل مع تحديث حالة التطبيق.

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

أخيرًا، يضيف TypeScript الكتابة الثابتة إلى اللغة، مما يوفر أمانًا أفضل للنوع وتجربة للمطور. يمكن أن يساعد في اكتشاف الأخطاء في وقت مبكر وضمان أن قاعدة الكود الخاصة بك نظيفة ومنظمة.

بشكل عام، تطبيق Next.js مع Turborepo و Zustand و TailwindCSS و TypeScript stack هو خيار قوي وحديث لأي مطور يبحث عن إنشاء تطبيقات ويب متطورة. في حين قد يكون هناك منحنى تعليمي، فإن الفوائد تستحق العناء، بما في ذلك أوقات تطوير أسرع، وأداء محسن، وسهولة صيانة قواعد الكود. فلماذا لا تجربها بنفسك؟

فقط جرّبها، إنها جيدة حقًا. إنها سهلة التوسع والصيانة.

المستودع: ipenywis/your-react-boilerplate Youtube: إعداد مشروع React للمطورين المبتدئين

Next.js Boilerplate بواسطة T3

إنشاء تطبيق T3 (CT3A) هو مجموعة بدء تشغيل لبناء تطبيقات ويب باستخدام مجموعة محددة من التقنيات الحديثة التي تشكل مجموعة T3. تتكون مجموعة T3 من TypeScript و tRPC و TailwindCSS. يأخذ CT3A هذه المجموعة ويضيف تقنيات إضافية لإنشاء منصة قوية وسهلة الاستخدام لبناء تطبيقات الويب.

واحدة من الميزات البارزة لـ CT3A هي استخدام TypeScript. يعتقد منشئو CT3A أن TypeScript توفر تجربة أكثر اتساقًا وأقل إحباطًا من JavaScript العادي، خاصة بالنسبة للمطورين الجدد في تطوير الويب. مع TypeScript، يحصل المطورون على ملاحظات مباشرة أثناء كتابة الكود، مما يساعد على منع الأخطاء وتوفير الوقت على المدى الطويل.

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

يستخدم CT3A أيضًا tRPC، وهو بديل لـ GraphQL يوفر تجربة تطوير عميل سلسة ضد خادم آمن للأنواع، دون كل تلك المهام. من خلال الاستفادة من TypeScript، توفر tRPC تجربة مطور رائعة سهلة الاستخدام وعالية الأداء.

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

بشكل عام، إنشاء تطبيق T3 هو نقطة انطلاق رائعة لأي شخص يبحث عن إنشاء تطبيقات ويب حديثة باستخدام مجموعة قوية وسهلة الاستخدام من التقنيات. مع TypeScript و Next.js و tRPC و Prisma و Tailwind CSS و NextAuth.js، يوفر CT3A منصة شاملة وعالية الأداء لبناء تطبيقات ويب حديثة. إذا كنت تبحث عن إنشاء تطبيقات ويب باستخدام أحدث التقنيات وأفضل الممارسات، فإن CT3A يستحق التحقق منه بالتأكيد.

رابط: إنشاء تطبيق T3

خاتمة

هذا كل شيء لليوم. آمل أن تجد هذه المقالة مفيدة. إذا كانت لديك أي أسئلة أو اقتراحات، فيرجى إخباري في قسم التعليقات أدناه. شكرًا لك على القراءة.