Explorez l'architecture technique derrière AI Educademy : Next.js 15 App Router, next-intl pour i18n, pipeline de contenu MDX, sous-modules git, prise en charge PWA et déploiement Vercel.
Building AI Educademy présentait un défi technique unique : créer une plate-forme accessible aux apprenants du monde entier, facile à maintenir et suffisamment évolutive pour servir des millions d'utilisateurs, tout en gardant la base de code propre et conviviale pour les développeurs.
Dans cette étude approfondie, nous passerons en revue les décisions architecturales qui ont façonné notre plateforme, depuis notre choix de Next.js 15 jusqu'à la façon dont nous gérons le contenu multilingue avec les sous-modules git. Que vous construisiez une plate-forme éducative, un site de documentation ou toute autre application riche en contenu, vous trouverez ici des informations pratiques.
Lorsque nous avons commencé à créer AI Educademy, Next.js 14 était la norme. Au moment de notre lancement, Next.js 15 était sorti avec des améliorations significatives du routeur d'applications. Nous avons fait le saut car plusieurs facteurs correspondaient parfaitement à nos objectifs :
Composants du serveur par défaut : Le routeur d'applications Next.js 15 utilise les composants du serveur par défaut, ce qui signifie que nous pouvons récupérer les données directement dans nos composants sans routes API supplémentaires pour des opérations simples. Cela réduit la complexité et améliore les performances dès le départ.
Régénération statique incrémentielle (ISR) : le contenu éducatif ne change pas constamment, mais il change. ISR nous permet de pré-afficher les pages au moment de la construction, puis de les revalider selon un calendrier. Cela signifie que nos articles de blog, nos didacticiels et nos supports de cours sont toujours à jour sans les pertes de performances du rendu à la demande.
Optimisation intégrée : l'optimisation de l'image, le chargement des polices et le fractionnement du code sont gérés automatiquement. Nous n'avons pas eu à passer des cycles à créer ou à configurer ces fonctionnalités : elles fonctionnent simplement.
Routage basé sur des fichiers : la structure de fichiers intuitive du routeur d'applications indique clairement où se trouvent les pages et les routes API. Les nouveaux contributeurs peuvent accéder à la base de code et comprendre immédiatement la structure.
// 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 est conçu pour la communauté mondiale. Proposer du contenu dans plusieurs langues n'est pas seulement agréable, c'est essentiel pour remplir notre mission d'éducation gratuite à l'IA pour tous.
Nous avons choisi next-intl parce que :
/en/programs et /es/programas avec le même composant de page)Voici comment nous structurons notre configuration 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|.*\\..*).*)']
};
Nos fichiers de traduction sont organisés par langue et fonctionnalité :
messages/
├── en/
│ ├── common.json
│ ├── programs.json
│ └── blog.json
├── es/
│ ├── common.json
│ └── ...
└── fr/
└── ...
Cette approche évolue à merveille. Ajouter une nouvelle langue signifie ajouter un nouveau dossier avec des fichiers JSON – aucune modification de code n'est requise.
C'est ici que les choses deviennent intéressantes. Nous aurions pu utiliser un CMS sans tête traditionnel, mais nous avons choisi MDX car il nous offre le meilleur des deux mondes : une gestion de contenu dont la version est contrôlée aux côtés de notre code et la possibilité d'intégrer des composants React interactifs directement dans notre contenu éducatif.
Lorsque vous lisez un article de blog ou un didacticiel sur AI Educademy, vous ne lisez pas seulement du HTML statique. Vous pourriez interagir avec :
Tout cela est possible parce que nous utilisons MDX. Nos auteurs de contenu peuvent écrire en Markdown, mais les développeurs peuvent transmettre des composants personnalisés :
---
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" />
Pour que MDX fonctionne correctement dans Next.js 15, nous utilisons @next/mdx et le configurons dans notre 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']
});
Voici une décision architecturale intelligente : notre contenu réside dans des référentiels git séparés, intégrés dans l'application principale en tant que sous-modules git.
Pourquoi? Parce qu'il permet :
Notre structure de répertoires ressemble à :
ai-educademy/
├── content/ (git submodule)
│ ├── blog/
│ │ ├── en/
│ │ ├── es/
│ │ └── fr/
│ ├── programs/
│ │ └── [course content]
│ └── lab/
│ └── [interactive exercises]
├── app/
├── package.json
└── .gitmodules
Lorsque nous devons mettre à jour le contenu, nous :
# Pull latest content
git submodule update --remote
# Or content authors can PR directly to the content repo
Ce découplage a changé la donne pour notre vélocité. Le contenu peut être mis à jour sans déclencher de reconstruction d'application (grâce à ISR), et de nouveaux programmes peuvent être ajoutés par des non-ingénieurs.
L'éducation s'effectue sur tous les appareils, y compris dans les environnements à faible bande passante. Nous avons construit AI Educademy en tant que PWA afin que les apprenants puissent :
// next.config.js includes PWA configuration
import withPWA from 'next-pwa';
const withPWA = require('next-pwa')({
dest: 'public',
disable: process.env.NODE_ENV === 'development'
});
Notre stratégie Service Worker est simple :
Nous déployons sur Vercel car l'intégration avec Next.js est transparente. Chaque poussée vers notre branche principale déclenche des builds et des déploiements automatiques. Plus important encore :
Notre pipeline de déploiement ressemble à :
Git Push → GitHub → Vercel Build → CDN Distribution → Global Users
Pour les mises à jour de contenu en particulier, nous avons configuré des webhooks afin que lorsque notre sous-module de contenu est mis à jour, Vercel reconstruise automatiquement le site avec du nouveau contenu.
Toute cette architecture fonctionne ensemble pour créer une plate-forme performante au plus haut niveau. Nos mesures du monde réel :
Il ne s'agit pas de mesures vaniteuses : des sites plus rapides signifient qu'un plus grand nombre d'apprenants peuvent accéder à notre contenu, en particulier ceux sur les réseaux mobiles ou dans les régions aux infrastructures limitées.
L'intégralité de la base de code est open source. Si vous souhaitez voir comment tous ces éléments fonctionnent ensemble, vous pouvez explorer le référentiel, apporter des améliorations ou le créer pour votre propre plate-forme éducative.
L'architecture que nous avons décrite ici n'est pas propriétaire : elle repose sur des outils open source solides et largement adoptés. La communauté bénéficie de nos apprentissages et nous bénéficions des contributions de la communauté.
Que vous construisiez une plate-forme éducative ou une application riche en contenu, pensez à :
AI Educademy représente notre engagement en faveur d’une infrastructure technologique accessible, performante et maintenable pour l’éducation. Si l'une de ces technologies vous intéresse ou souhaitez contribuer, notre code est open source et attend votre collaboration.
Envie d'essayer notre plateforme ? Découvrez nos programmes | Visitez le Lab | En savoir plus sur notre mission
Essaie gratuitement la premiere lecon de n importe quelle academie, puis debloque toutes les autres lecons, projets et certificats avec Pro.
État de l’IA Open Source en 2026 : les modèles, les outils et les communautés ouvrent la voie
De HuggingFace à Llama en passant par LeRobot, l'IA open source prospère en 2026. Découvrez les meilleurs modèles, outils et communautés qui façonnent l'IA accessible à tous.
Pourquoi nous avons créé l'Académie de l'IA
L'histoire d'une plateforme éducative gratuite et open source sur l'IA qui enseigne l'intelligence artificielle en 11 langues, des débutants absolus aux praticiens avancés.