Vactory est un starter Drupal headless + Next.js développé par VOID, utilisé en production sur plus de 50 projets clients (banques, institutions, e-commerce). Il permet de démarrer un projet Drupal moderne 10x plus rapidement en incluant des modules, blocs et features prêts à l'emploi.
Dans cet article, nous explorons l'architecture, les modules inclus, l'installation, et les cas d'usage de Vactory pour vous aider à décider si c'est la bonne solution pour votre prochain projet Drupal.
🎯 Site démo et documentation
- Démo interactive : vactory.leserveurdetest.com/en
- Documentation technique : thenextdrupal.com
Qu'est-ce que Vactory ?
Vactory (contraction de "VOID Factory") est un framework Drupal headless qui combine :
- Backend Drupal 10/11 : avec modules contrib préconfigurés (JSON:API, Dynamic Field, Search API, Webform...)
- Frontend Next.js 14+ : avec TypeScript, Tailwind CSS, Storybook
- 10+ modules métier : News, Events, Médiathèque, Store Locator, Search, Webforms...
- Architecture éprouvée : utilisée sur 50+ projets enterprise (banques, institutions, médias)
Objectif : Permettre aux équipes de démarrer un projet Drupal headless en quelques heures au lieu de plusieurs semaines, tout en gardant la flexibilité pour personnaliser selon les besoins.
Pourquoi Drupal headless + Next.js ?
L'approche Drupal headless (ou decoupled Drupal) sépare le backend (Drupal) du frontend (Next.js). Voici pourquoi c'est devenu la norme pour les projets enterprise :
✅ Avantages
- Performance : Next.js génère du HTML statique (SSR/ISR) servi via CDN
- Sécurité : Backend Drupal isolé, non exposé au public
- Scalabilité : Frontend découplé peut servir des millions de requêtes
- Expérience développeur : React, TypeScript, hot-reload
- Multi-canal : Une API Drupal peut alimenter web, mobile, IoT
⚠️ Challenges
- Complexité : Architecture plus complexe (2 stacks à gérer)
- Temps setup : From scratch, ça prend des semaines
- Compétences : Requiert expertise Drupal + React/Next.js
- Coût initial : Développement plus long sans starter
- Preview : Prévisualisation éditoriale plus complexe
👉 C'est ici que Vactory intervient : il résout tous les challenges ci-dessus en fournissant une architecture prête à l'emploi, testée sur 50+ projets.
Architecture technique de Vactory
Vactory repose sur une architecture découplée avec communication via JSON:API.
Stack technique complète
🔧 Backend Drupal
- Drupal 10/11 (dernière version stable)
- JSON:API : exposition des contenus en REST API
- Dynamic Field module : blocs statiques/dynamiques flexibles
- Search API : indexation + recherche (Elasticsearch, Solr)
- Webform : formulaires complexes avec workflows
- Content moderation : workflows éditoriaux
- Paragraphs : contenu structuré flexible
- Media : gestion images/vidéos centralisée
⚛️ Frontend Next.js
- Next.js 14+ avec App Router
- TypeScript : code type-safe
- Tailwind CSS : styling utilitaire
- React 18+ : Server Components, Suspense
- Storybook : catalogue composants UI
- React Query : data fetching et cache
- next-i18next : internationalisation
- AMP : pages mobiles accélérées
🚀 DevOps & Déploiement
- Docker : conteneurisation complète
- Drone CI : pipelines automatisés
- Vercel / Netlify : déploiement frontend
- CDN : distribution edge globale
- Revalidation : ISR pour contenu à jour
Modules métier inclus dans Vactory
Vactory inclut 10+ modules prêts à l'emploi pour couvrir les besoins les plus courants :
📰News & Blog
Système d'articles complet avec catégories, tags, auteurs, pagination, recherche, et partage social.
Cas d'usage : portails corporate, magazines en ligne, blogs institutionnels.
📅Events (Événements)
Gestion d'événements avec dates, lieux, inscriptions, agenda/calendrier, et filtres.
Cas d'usage : universités, fondations, centres culturels, salons professionnels.
🎬Médiathèque
Galerie photos/vidéos avec filtres, lightbox, téléchargement, et métadonnées.
Cas d'usage : services communication, agences médias, institutions culturelles.
📍Store Locator
Carte interactive des points de vente avec filtres géographiques, recherche par ville/code postal, horaires, et itinéraires.
Cas d'usage : banques (agences), retail, restaurants, franchises.
🔍Search API & Facettes
Recherche avancée avec facettes dynamiques, auto-complétion, tri, et pagination. Support Elasticsearch/Solr.
Cas d'usage : sites avec beaucoup de contenu (e-commerce, portails documentaires).
📝Webforms
Formulaires React générés depuis Drupal Webform module avec validation côté client/serveur, captcha, et notifications email.
Cas d'usage : formulaires contact, demandes de devis, inscriptions, enquêtes.
Fonctionnalités transverses
En plus des modules métier, Vactory inclut des fonctionnalités transverses essentielles :
- 🌍 Multilingue (i18n) : Support multi-langues avec détection automatique, URLs localisées, menus traduits.
- 🔐 Authentification : Login/register avec OAuth, JWT, gestion des rôles et permissions Drupal.
- 📱 AMP : Pages mobiles accélérées générées automatiquement pour Google AMP.
- 🎨 Multi-theme : Support de plusieurs thèmes Next.js depuis un seul backend Drupal.
- ⚡ Performance : SSR, ISR, CSR hybride avec revalidation intelligente.
- 🔒 Sécurité : Backend isolé, CORS configuré, rate limiting, CSRF protection.
- 📊 SEO : Métadonnées dynamiques, Open Graph, sitemaps XML, structured data.
- 🚀 CI/CD : Pipelines Drone pour déploiement automatisé (staging, prod).
Installation de Vactory
Vactory propose un script d'installation automatisé documenté sur thenextdrupal.com. Voici les grandes étapes :
🚀 Étapes d'installation
- Cloner le repository :
git clone [vactory-repo] - Lancer le script d'installation :
./vactory_next install - Configurer les variables d'environnement : Drupal backend URL, clés API, etc.
- Installer Drupal :
drush site:install - Lancer Next.js :
npm run dev - Configurer Docker (optionnel) : Pour environnement conteneurisé complet
Temps d'installation : ~30 minutes pour un environnement local complet.
Cas d'usage réels chez VOID
Vactory est utilisé en production sur 50+ projets clients de VOID. Voici quelques exemples :
🏦 Attijariwafa bank - Hub Digital
Contexte : Portail institutionnel du groupe bancaire #1 au Maroc/Afrique, présent dans 25 pays.
Modules Vactory utilisés : News, Events, Store Locator (agences), Search API, Multilingue (FR/EN/AR).
Résultats : 95+ Lighthouse score, millions de visites/mois, 99.9% uptime.
📈 Bourse de Casablanca
Contexte : Portail de la première place boursière du Maroc avec données temps réel.
Modules Vactory utilisés : News, Events, Médiathèque, Search API, Webforms, WebSocket temps réel.
Résultats : Performance exceptionnelle (95+ Lighthouse), PWA pour mobile premium.
🏥 FM6SS - Fondation Santé
Contexte : Écosystème digital regroupant plusieurs portails institutionnels santé.
Modules Vactory utilisés : Multi-site, News, Events, Médiathèque, Multilingue, Webforms.
Résultats : Architecture Drupal découplé + Next.js conteneurisée avec Docker.
Vactory vs. alternatives
Comment Vactory se positionne face aux autres solutions Drupal headless ?
| Solution | Modules prêts | Production-ready | Support |
|---|---|---|---|
| Vactory (VOID) | ✅ 10+ modules | ✅ 50+ projets | ✅ Support VOID |
| Next.js for Drupal | ⚠️ Basique | ✅ Communauté | ⚠️ Communauté |
| Drupal + Gatsby | ❌ DIY | ⚠️ Variable | ⚠️ Communauté |
| Drupal monolithique | ✅ Twig templates | ✅ Mature | ❌ Perf. limitée |
Quand utiliser Vactory ?
Vactory est particulièrement adapté pour :
- Projets enterprise : Banques, institutions, grandes entreprises avec besoins complexes
- Sites multilingues : Portails internationaux avec 3+ langues
- Sites à fort trafic : Besoin de scalabilité et performance (CDN, ISR)
- Projets avec modules standards : News, Events, Store Locator sont déjà inclus
- Équipes avec expertise Drupal + React : Vactory nécessite les deux compétences
- Projets avec budget pour accompagnement VOID : Support expert disponible
Conclusion
Vactory est le meilleur starter Drupal + Next.js pour démarrer rapidement des projets enterprise. Avec 10+ modules prêts, une architecture éprouvée sur 50+ projets, et le support VOID, vous gagnez des semaines de développement et réduisez les risques.
Recommandation VOID : Si vous envisagez un projet Drupal headless avec Next.js, Vactory est la solution la plus rapide, fiable et scalable du marché.
Besoin d'aide avec Vactory ?
L'équipe VOID vous accompagne sur l'installation, la personnalisation, et le déploiement de Vactory. Nous gérons également la maintenance et les évolutions de votre projet.
Demander une démo VactoryRessources complémentaires
- Documentation Vactory : thenextdrupal.com
- Démo interactive : vactory.leserveurdetest.com/en
- Page produit Vactory : Présentation complète
- Expertise Drupal VOID : Développement, migrations, maintenance
- Expertise React VOID : Next.js, TypeScript, performance
Cet article présente Vactory, le starter Drupal + Next.js développé par VOID et utilisé sur 50+ projets clients. Informations à jour en 2025.