Si vous recherchez un modèle de blog moderne pour débuter, conçu avec Next.js, le projet NextJS Base Blog est un excellent point de départ. Il s'agit d'une application de blog open source complète, développée avec Next.js 15, React 19, TypeScript et Tailwind CSS 4 .
Ce projet offre une architecture propre, une interface utilisateur moderne componentset une couche API factice, ce qui le rend idéal pour les développeurs souhaitant créer rapidement un blog sans avoir à configurer de backend.
Dépôt GitHub : https://github.com/bfotool/nextjs-base-blog
Ce projet est particulièrement utile pour :
Développeurs apprenant Next.js AppRouter
Créer rapidement un blog ou un site web de contenu
Création d'un projet de base Next.js
Développement des fonctionnalités d'interface utilisateur avant la connexion à une API backend réelle
Aperçu du projet
NextJS Base Blog est conçu comme un modèle de blog prêt pour la production, doté de nombreuses fonctionnalités communes aux sites web de contenu modernes.
Le projet comprend:
une page d'accueil avec des articles en vedette
pages d'articles de blog
filtrage par catégorie
recherche en texte intégral
pagination
table des matières
Articles similaires
Thème sombre/clair
L'un des aspects les plus intéressants du projet est la couche d'API factice, qui simule une API REST à l'aide d'intercepteurs Axios. Cela permet aux développeurs de créer et de tester l'application sans avoir besoin d'un serveur backend .
Caractéristiques principales
Page d'accueil
La page d'accueil affiche plusieurs sections importantes :
Article vedette
filtres de catégorie
une grille d'articles de blog
navigation paginée
La mise en page est entièrement adaptative et optimisée pour les ordinateurs et les appareils mobiles.
Page de l'article de blog
Chaque article est accessible via un itinéraire dynamique :
/blog/[slug]
La page de l'article de blog comprend plusieurs fonctionnalités utiles :
Contenu complet de l'article
table des matières automatique
temps de lecture estimé
boutons de partage sur les réseaux sociaux
suggestions d'articles similaires
Ces fonctionnalités contribuent à créer une expérience de lecture professionnelle similaire à celle des plateformes de blogs modernes.
Pages de catégorie
Les utilisateurs peuvent consulter les articles par catégorie.
Exemple d'itinéraire :
/blog/category/[slug]
Cette fonctionnalité permet aux lecteurs d'explorer du contenu sur des sujets spécifiques.
Fonctionnalité de recherche
Le projet comprend une page de recherche intégrée :
/search
La recherche prend en charge :
résultats en temps réel
entrée déboîtée
recherche dans les titres, les extraits et les étiquettes
Cela améliore l'ergonomie et aide les utilisateurs à trouver rapidement le contenu pertinent.
Pages À propos et Contact
Le projet comprend également des pages supplémentaires que l'on trouve généralement sur les blogs professionnels.
À propos de la page
La page À propos présente :
l'équipe
l'histoire du projet
valeurs fondamentales
Page de contact
La page Contact comprend un formulaire entièrement validé avec :
validation de formulaire
notifications toast
Commentaires sur les succès et les erreurs
Prise en charge du mode sombre
Le blog prend en charge le mode sombre et le mode clair .
Caractéristiques :
détection automatique du thème du système
bascule manuelle
persistance du thème via localStorage
Couche API factice(développement sans backend)
L'un des aspects les plus intéressants de ce projet est son système d'API factice .
Au lieu d'appeler un véritable serveur, l'application utilise des intercepteurs Axios pour simuler les réponses de l'API REST.
Comment fonctionne la fausse API
L'instance Axios est créée dans :
src/services/api-client.ts
Lorsque la variable d'environnement est activée :
NEXT_PUBLIC_USE_MOCK_API=true
Les requêtes sont interceptées avant d'atteindre le réseau.
Les gestionnaires factices renvoient de fausses réponses avec des délais réalistes(200–600 ms).
Les réponses se comportent comme de véritables réponses d'API.
Les données simulées sont stockées dans :
src/mocks/
Y compris:
exemples de publications
auteurs
catégories
Points de terminaison API disponibles
L'API simulée prend en charge plusieurs points de terminaison :
| Méthode | Point de terminaison | Description |
|---|---|---|
| OBTENIR | /messages | Articles de blog paginés |
| OBTENIR | /articles/à la une | Articles en vedette |
| OBTENIR | /posts/:slug | Article de blog unique |
| OBTENIR | /catégories | Liste des catégories |
| OBTENIR | /auteurs | Liste des auteurs |
| POSTE | /contact | Soumettre le formulaire de contact |
Pile technologique
Le projet utilise une architecture frontend moderne.
| Couche | Technologie |
|---|---|
| Cadre | Next.js 15 |
| Bibliothèque d'interface utilisateur | Réaction 19 |
| Langue | Manuscrit |
| stylisme | Tailwind CSS 4 |
| Client HTTP | Axios |
| Icônes | Réaction Lucide |
| peluches | ESLint |
| Mise en forme | Plus joli |
Cette pile fournit :
sécurité de type fort
architecture maintenable
expérience de développeur moderne
Structure du projet
La structure du projet suit une architecture propre et évolutive.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
ApplicationRouter
Le apprépertoire contient tous les itinéraires de l'application.
Exemples:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Cela suit l' architecture d'application Next.jsRouter introduite dans les versions plus récentes de Next.js.
Composants
Les interfaces utilisateur componentssont organisées en groupes logiques :
components/layout
components/common
components/blog
Cette structure permet de garder le code de l'interface utilisateur organisé et plus facile à maintenir.
Couche de services
Le servicesdossier contient la logique liée à l'API :
configuration du client API
service postal
service de catégorie
service de formulaire de contact
Cette couche sépare la logique de récupération des données de l'interface utilisateurcomponents, ce qui améliore l'évolutivité.
Guide d'installation
Exigences
Avant de commencer, assurez-vous d'avoir:
Node.js 18 ou version ultérieure
npm, yarn ou pnpm
Cloner le dépôt
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Installer les dépendances
npm install
Configurer les variables d'environnement
cp .env.example .env
Démarrer le serveur de développement
npm run dev
Ouvrez votre navigateur et rendez-vous sur :
http://localhost:3000
Scripts disponibles
| Commande | Description |
|---|---|
| npm run dev | Serveur de développement en cours de démarrage |
| npm run build | Créer une version de production |
| npm run start | Démarrer le serveur de production |
| npm run lint | Exécutez ESLint |
| format d'exécution npm | Formatez le code avec Prettier |
| npm run type-check | Exécuter les vérifications TypeScript |
Passage à une véritable API
Si vous souhaitez connecter le projet à une véritable API backend, suivez ces étapes.
Étape 1 : Désactiver l’API simulée
Modifier le .envfichier :
NEXT_PUBLIC_USE_MOCK_API=false
Étape 2 : Définir l’URL de base de l’API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Étape 3 : Faire correspondre les types de données
Assurez-vous que votre API backend renvoie des données correspondant aux définitions TypeScript dans :
src/types/index.ts
Aucune modification de code supplémentaire n'est requise.
Personnalisation du contenu
Le contenu fictif peut être modifié à l'intérieur :
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Cela permet aux développeurs de personnaliser rapidement le contenu de démonstration.
Personnalisation du thème et de l'interface utilisateur
Le style global se trouve dans :
src/app/globals.css
Le projet utilise les polices suivantes :
DM Sans
JetBrains Mono
Vous pouvez modifier les styles ou remplacer les polices en fonction de vos besoins de conception.
Conclusion
NextJS Base Blog est un modèle de base puissant et moderne pour créer un blog avec Next.js.
Les principaux avantages du projet sont les suivants :
pile technologique moderne
architecture propre
API factice pour le développement
Intégration facile avec les API backend réelles
Interface utilisateur réactive et fonctionnalités modernes
Si vous développez un blog, un site web pour développeurs ou une plateforme de contenu avec Next.js, ce dépôt peut vous faire gagner un temps de développement considérable.
Explorez le code source ici : https://github.com/bfotool/nextjs-base-blog