استكشف البنية التقنية وراء AI Educademy: Next.js 15 App Router وnext-intl لـ i18n وخط أنابيب محتوى MDX ووحدات git الفرعية ودعم PWA ونشر Vercel.
قدم بناء AI Educademy تحديًا تقنيًا فريدًا: إنشاء منصة يمكن للمتعلمين في جميع أنحاء العالم الوصول إليها، وسهلة الصيانة، وقابلة للتطوير بما يكفي لخدمة ملايين المستخدمين - كل ذلك مع الحفاظ على قاعدة التعليمات البرمجية نظيفة وصديقة للمطورين.
في هذا الغوص العميق، سنتعرف على القرارات المعمارية التي شكلت نظامنا الأساسي، بدءًا من اختيارنا لـ Next.js 15 وحتى كيفية إدارة المحتوى متعدد اللغات باستخدام وحدات git الفرعية. سواء كنت تقوم ببناء منصة تعليمية، أو موقع توثيق، أو أي تطبيق كثيف المحتوى، ستجد رؤى عملية هنا.
عندما بدأنا في بناء أكاديمية الذكاء الاصطناعي التعليمية، كان Next.js 14 هو المعيار. بحلول وقت إطلاقنا، تم إصدار Next.js 15 مع تحسينات كبيرة على جهاز توجيه التطبيقات. لقد قمنا بهذه القفزة لأن عدة عوامل تتوافق تمامًا مع أهدافنا:
مكونات الخادم بشكل افتراضي: يستخدم جهاز توجيه التطبيقات Next.js 15 مكونات الخادم بشكل افتراضي، مما يعني أنه يمكننا جلب البيانات مباشرة في مكوناتنا دون الحاجة إلى مسارات واجهة برمجة تطبيقات إضافية لإجراء عمليات بسيطة. وهذا يقلل من التعقيد ويحسن الأداء خارج الصندوق.
التجديد الثابت التزايدي (ISR): المحتوى التعليمي لا يتغير باستمرار، ولكنه يتغير. يسمح لنا ISR بعرض الصفحات مسبقًا في وقت الإنشاء ثم إعادة التحقق منها وفقًا لجدول زمني. وهذا يعني أن منشورات مدونتنا وبرامجنا التعليمية ومواد الدورة التدريبية تكون دائمًا جديدة دون التأثير على أداء العرض عند الطلب.
التحسين المدمج: تتم معالجة تحسين الصور وتحميل الخط وتقسيم التعليمات البرمجية تلقائيًا. لم يكن علينا قضاء دورات في بناء هذه الميزات أو تكوينها - فهي تعمل فقط.
** التوجيه المستند إلى الملف **: تجعل بنية الملفات البديهية لجهاز توجيه التطبيقات من الواضح مكان وجود الصفحات ومسارات واجهة برمجة التطبيقات. يمكن للمساهمين الجدد القفز إلى قاعدة التعليمات البرمجية وفهم البنية على الفور.
// Our routing structure is intuitive and scalable
app/
├── [locale]/
│ ├── page.tsx
│ ├── programs/
│ │ ├── page.tsx
│ │ └── [slug]/
│ │ └── page.tsx
│ └── blog/
│ ├── page.tsx
│ └── [slug]/
│ └── page.tsx
├── api/
└── layout.tsx
تم تصميم AI Educademy للمجتمع العالمي. إن تقديم محتوى بلغات متعددة ليس أمرًا رائعًا فحسب، بل إنه ضروري لتحقيق مهمتنا المتمثلة في تعليم الذكاء الاصطناعي مجانًا للجميع.
لقد اخترنا next-intl لأنه:
/en/programs و/es/programas مع نفس مكون الصفحة)إليك كيفية تنظيم إعداد i18n الخاص بنا:
// middleware.ts - Detects user locale and routes accordingly
import { createMiddleware } from 'next-intl/middleware';
export default createMiddleware({
locales: ['en', 'es', 'fr', 'de', 'zh'],
defaultLocale: 'en'
});
export const config = {
matcher: ['/((?!api|_next|.*\\..*).*)']
};
يتم تنظيم ملفات الترجمة لدينا حسب اللغة والميزات:
messages/
├── en/
│ ├── common.json
│ ├── programs.json
│ └── blog.json
├── es/
│ ├── common.json
│ └── ...
└── fr/
└── ...
هذا النهج يتدرج بشكل جميل. تعني إضافة لغة جديدة إضافة مجلد جديد يحتوي على ملفات JSON - لا يلزم إجراء تغييرات في التعليمات البرمجية.
هنا تصبح الأمور مثيرة للاهتمام. كان بإمكاننا استخدام نظام إدارة محتوى تقليدي بدون رأس، لكننا اخترنا MDX لأنه يمنحنا أفضل ما في العالمين: إدارة المحتوى التي يتم التحكم في الإصدار جنبًا إلى جنب مع التعليمات البرمجية الخاصة بنا، والقدرة على تضمين مكونات React التفاعلية مباشرة في المحتوى التعليمي الخاص بنا.
عندما تقرأ منشور مدونة أو برنامج تعليمي على AI Educademy، فإنك لا تقرأ فقط HTML ثابتًا. ربما تتفاعل مع:
كل هذا ممكن لأننا نستخدم MDX. يمكن لمؤلفي المحتوى لدينا الكتابة في Markdown، لكن يمكن للمطورين تمرير مكونات مخصصة:
---
title: "Understanding Neural Networks"
---
# Understanding Neural Networks
<ConceptExplainer concept="neural-networks" />
Neural networks are inspired by how our brains work...
<InteractiveQuiz questionId="nn-101" />
## Real-World Applications
<CodeExample language="python" title="Simple Neural Network" />
لجعل MDX يعمل بسلاسة في Next.js 15، نستخدم @next/mdx وقم بتكوينه في next.config.js:
// next.config.js
import createMDX from '@next/mdx';
const withMDX = createMDX({
options: {
remarkPlugins: [
// Our custom plugins for syntax highlighting, TOC generation, etc.
],
rehypePlugins: []
}
});
export default withMDX({
pageExtensions: ['ts', 'tsx', 'mdx']
});
إليك قرارًا معماريًا ذكيًا: يوجد المحتوى الخاص بنا في مستودعات git منفصلة، ويتم سحبه إلى التطبيق الرئيسي كوحدات فرعية لـ git.
لماذا؟ لأنه يتيح:
تبدو بنية الدليل لدينا كما يلي:
ai-educademy/
├── content/ (git submodule)
│ ├── blog/
│ │ ├── en/
│ │ ├── es/
│ │ └── fr/
│ ├── programs/
│ │ └── [course content]
│ └── lab/
│ └── [interactive exercises]
├── app/
├── package.json
└── .gitmodules
عندما نحتاج إلى تحديث المحتوى، فإننا:
# Pull latest content
git submodule update --remote
# Or content authors can PR directly to the content repo
لقد أدى هذا الانفصال إلى تغيير قواعد اللعبة بالنسبة لسرعتنا. يمكن تحديث المحتوى دون الحاجة إلى إعادة بناء التطبيق (بفضل ISR)، ويمكن لغير المهندسين إضافة برامج جديدة.
يتم التعليم على جميع الأجهزة، بما في ذلك البيئات ذات النطاق الترددي المنخفض. لقد قمنا ببناء AI Educademy باعتبارها PWA حتى يتمكن المتعلمون من:
// next.config.js includes PWA configuration
import withPWA from 'next-pwa';
const withPWA = require('next-pwa')({
dest: 'public',
disable: process.env.NODE_ENV === 'development'
});
استراتيجية عامل الخدمة لدينا واضحة ومباشرة:
نحن ننشر على Vercel لأن التكامل مع Next.js يتم بسلاسة. تؤدي كل دفعة إلى فرعنا الرئيسي إلى عمليات إنشاء ونشر تلقائية. والأهم من ذلك:
يبدو خط أنابيب النشر الخاص بنا كما يلي:
Git Push → GitHub → Vercel Build → CDN Distribution → Global Users
بالنسبة لتحديثات المحتوى على وجه التحديد، قمنا بإعداد خطافات الويب بحيث يقوم Vercel تلقائيًا بإعادة بناء الموقع بمحتوى جديد عند تحديث وحدة المحتوى الفرعية الخاصة بنا.
تعمل كل هذه البنية معًا لإنشاء منصة تعمل على المستوى الأعلى. مقاييسنا الواقعية:
هذه ليست مقاييس تافهة - فالمواقع الأسرع تعني أن المزيد من المتعلمين يمكنهم الوصول إلى المحتوى الخاص بنا، خاصة أولئك الموجودين على شبكات الهاتف المحمول أو في المناطق ذات البنية التحتية المحدودة.
##مبادئ مفتوحة المصدر 💚
قاعدة التعليمات البرمجية بأكملها مفتوحة المصدر. إذا كنت تريد أن ترى كيف تعمل كل هذه الأجزاء معًا، فيمكنك استكشاف المستودع، أو المساهمة في التحسينات، أو تشكيله لمنصتك التعليمية الخاصة.
البنية التي وصفناها هنا ليست ملكية خاصة - فهي مبنية على أدوات قوية ومفتوحة المصدر ومعتمدة على نطاق واسع. يستفيد المجتمع من تعلمنا، ونحن نستفيد من مساهمات المجتمع.
سواء كنت تقوم بإنشاء منصة تعليمية أو أي تطبيق كثيف المحتوى، ضع في اعتبارك ما يلي:
تمثل AI Educademy التزامنا بتوفير بنية تحتية تكنولوجية للتعليم يمكن الوصول إليها وفعالة وقابلة للصيانة. إذا كنت مهتمًا بأي من هذه التقنيات أو ترغب في المساهمة، الكود الخاص بنا مفتوح المصدر وينتظر تعاونك.
Want to try our platform? Explore our programmes | Visit the Lab | Read more about our mission
جرّب أول درس في أي أكاديمية مجانًا، ثم افتح كل درس ومشروع وشهادة متبقية مع Pro.
حالة الذكاء الاصطناعي مفتوح المصدر في عام 2026: النماذج والأدوات والمجتمعات التي تقود الطريق
من HuggingFace إلى Llama إلى LeRobot، سيزدهر الذكاء الاصطناعي مفتوح المصدر في عام 2026. استكشف أفضل النماذج والأدوات والمجتمعات التي تشكل الذكاء الاصطناعي الذي يمكن للجميع الوصول إليه.
لماذا قمنا ببناء أكاديمية الذكاء الاصطناعي التعليمية
القصة وراء منصة تعليمية مجانية ومفتوحة المصدر للذكاء الاصطناعي تقوم بتدريس الذكاء الاصطناعي بـ 11 لغة - بدءًا من المبتدئين تمامًا وحتى الممارسين المتقدمين.