/team-starter-nextjs

[WORK IN PROGRESS] - TEAM DEVELOPMENT STARTER KIT : Starter de configuration d'un projet Next.js 14 avec App Router - Typescript, ESLint, Prettier, Husky, scopes de commit personnalisés, Lint-Staged, Docker, Pipeline CI/CD et NextAuth ✨

Primary LanguageTypeScriptMIT LicenseMIT

TEAM DEVELOPMENT STARTER KIT

GitHub last commit GitHub forks GitHub Repo stars GitHub watchers License: MIT

TEAM DEVELOPMENT STARTER KIT est un template Next.js prêt à l'emploi, conçu pour vous permettre de démarrer rapidement le développement de votre nouvelle application web en équipe. Il intègre les meilleures pratiques et les dernières fonctionnalités de Next.js, ainsi que des outils de développement essentiels pour améliorer votre productivité.

Fonctionnalités

Technologies et bibliothèques

Next.js Typescript React

  • Next.js 14 avec App Router : Bénéficiez des dernières fonctionnalités et améliorations de performances de Next.js, notamment le nouveau système de mise en page (app/), le rendu côté serveur et la navigation de fichiers.
  • Typescript : Un support complet de TypeScript pour un code plus robuste et plus facilement maintenable.
  • Tailwind CSS : Une configuration préconfigurée de Tailwind CSS pour une stylisation moderne et réactive de vos composants.
  • ESLint et Prettier : Des outils de lint et de formatage de code préconfigurés pour maintenir une base de code cohérente et lisible.
  • Husky et Lint-Staged : Des hooks de Git pour exécuter automatiquement les vérifications de lint et de formatage avant chaque commit.
  • Docker : Un outil de conteneurisation pour faciliter le déploiement et la gestion des environnements de développement.
  • Zod : Un schéma de validation de données puissant et simple à utiliser.
  • Google Analytics : Un outil de suivi des performances pour analyser le comportement des utilisateurs et améliorer l'expérience utilisateur.
  • NextAuth.js : Intégration d'un système d'authentification robuste et flexible, permettant une connexion sécurisée via Google.
  • Gestion des variables d'environnement : Utilisation de @t3-oss/env-nextjs et Zod pour une validation stricte des variables d'environnement, assurant une configuration sécurisée et sans erreur.
  • Composants réutilisables : Mise en place de composants comme AuthButton et ThemeButton pour une interface utilisateur cohérente et facile à maintenir.
  • Gestion des métadonnées : Configuration avancée des métadonnées pour un meilleur référencement (SEO) et partage sur les réseaux sociaux.
  • Gestion des erreurs : Implémentation d'une page 404 personnalisée pour une meilleure expérience utilisateur en cas d'erreur.
  • Templates pour les issues GitHub : Ajout de templates pour les rapports de bugs et les demandes de fonctionnalités, facilitant la contribution et le suivi des problèmes.

Bénéfices

  • Sécurité renforcée : L'authentification NextAuth.js et la gestion sécurisée des variables d'environnement réduisent les risques de failles de sécurité.
  • Productivité accrue : Les composants réutilisables et les outils de développement intégrés permettent aux développeurs de se concentrer sur la logique métier plutôt que sur la configuration.
  • Meilleure collaboration : Les templates GitHub et les pratiques de développement standardisées facilitent le travail d'équipe et la gestion du projet.
  • Expérience utilisateur améliorée : La gestion des erreurs personnalisée et l'interface utilisateur cohérente offrent une meilleure expérience aux utilisateurs finaux.
  • Optimisation pour les moteurs de recherche : La configuration avancée des métadonnées améliore la visibilité du site sur les moteurs de recherche et les réseaux sociaux.

Utilisation

  1. Clonez le dépôt :

Créer un nouveau repository à part du lien "utiliser ce template" puis

git clone 'lien de votre nouveau repo'

Merci de préférer cette façon de faire, afin de faire connaître le template.

ou

En utilisant create-next-app :

pnpm create next-app  -e https://github.com/drondiodev/team-starter-nextjs ts-pnpm
  1. Accédez au répertoire du projet :

cd 'nom de votre repo'

  1. Installez les dépendances du projet avec pnpm :
pnpm install
  1. Démarrez le serveur de développement :
pnpm dev

Votre application Next.js sera alors accessible à l'adresse http://localhost:3000.

  1. Configurez les variables d'environnement :

    • Copiez le fichier .env.example en .env.local
    • Remplissez les variables GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, NEXTAUTH_URL et NEXTAUTH_SECRET avec vos propres valeurs

  2. Lancez l'application :

pnpm dev

Votre application Next.js sera alors accessible à l'adresse http://localhost:3000.

  1. Faites vos modifications puis :
git add -A
pnpm commit

Puis laisser vous guider en suivant les instructions dans le terminal

git push