Boilerplate Next.js + Strapi optimisé SSR
Je vous partage ce boilerplate Next.js + Strapi optimisé SSR pour coder vos projets SEO beaucoup plus rapidement.
Boilerplate Next.js + Strapi TS + Postgres : une base solide pour vos projets SSR
Après avoir partagé un boilerplate orienté temps réel (Vite, React, TypeScript, Supabase), je vous propose aujourd’hui un nouveau starter kit, cette fois pour des projets qui nécessitent du server-side rendering (SSR). On part donc sur une stack Next.js 15 + Strapi 5 + PostgreSQL, le tout dans un monorepo PNPM avec Docker Compose pour faciliter le setup.
Pourquoi ce boilerplate ?
Parce que dans la vraie vie, tout n’est pas temps réel. Quand on monte un blog, un e-commerce ou n’importe quel site SEO-friendly, on a besoin de SSR. Ce boilerplate vous permet de démarrer vite avec une structure claire, une base Strapi propre en TypeScript, et une bonne séparation front/back.
📌 Stack technique :
- Next.js 15 (App Router, React Query)
- Strapi 5 (TypeScript ready)
- PostgreSQL + PGAdmin via Docker
- Auth + CRUD avec tokens JWT
- Monorepo PNPM + Docker Compose
Monorepo, PGAdmin et Docker : setup rapide
Tout est pensé pour aller vite : vous clônez le repo, vous lancez le Docker Compose (Postgres + PGAdmin), vous configurez vos variables d’environnement (.env pour le front, .env pour le back), et c’est parti. J’ai documenté chaque étape dans le README, donc pas de galère.
Le backend : Strapi TS minimaliste
On est sur du Strapi TypeScript, pas de JavaScript ici. Le backend expose une simple collection task avec un user system. Vous pouvez évidemment étendre facilement le modèle avec le backoffice Strapi (création de nouveaux types, champs, etc.).
Bonus : Je fournis les commandes pour générer les clés nécessaires avec OpenSSL. Pas de prise de tête.
Le frontend : Next.js comme gateway
Le front est un app Next.js qui agit comme une passerelle vers Strapi. L’objectif : ne jamais exposer directement les endpoints Strapi.
Toutes les requêtes passent par des routes API Next (comme /api/login), qui elles-mêmes appellent le backend Strapi. C’est utile pour cloisonner, protéger, et vous préparer à un éventuel déploiement en prod avec une gateway privée.
✅ Auth avec token JWT
✅ Stockage du token en localStorage
✅ Hooks custom pour login, tâches, etc.
CRUD, React Query et cache automatique
La todo-list de base vous permet de faire du CRUD complet. On utilise React Query pour le fetch et le cache. Résultat : une UX fluide, pas besoin de tout refetch à la main, le cache se met à jour tout seul grâce à l’invalidation.
Organisation du code
components/pour vos UIhooks/pour toutes les fonctions réutilisables (login, getTasks, etc.)types/pour vos modèles Strapilib/pour le QueryClient et autres outils globauxpages/: un login, un logout, et une page de tâches
Un projet modulaire et évolutif
Ce boilerplate est pensé pour évoluer. Besoin d’un modèle Product ? Ajoutez-le dans Strapi, définissez vos champs, et vous avez instantanément un nouveau backend prêt à consommer. Le frontend suit, vous avez déjà les hooks et la structure pour le faire proprement.
En résumé
Si vous bossez sur un projet SEO (blog, vitrine, shop), ce boilerplate est une base clean, modulaire, prête à l’emploi. Je m’en sers moi-même pour le blog dev-freelance.fr.
C’est une sorte de Create React App nouvelle génération, mais pour des projets Next.js modernes.
💡 Téléchargez le boilerplate, testez, adaptez, shippez.