Skip to content
Learni
View all tutorials
Développement Web

Comment créer un référentiel de compétences en 2026

18 minINTERMEDIATE
Next.jsPrismaCompétences

Introduction

Un référentiel de compétences structuré est essentiel pour aligner les équipes sur les objectifs stratégiques. Il permet d'identifier les gaps de compétences, de planifier les formations et d'optimiser les recrutements. Dans ce tutoriel, nous allons construire une application web complète avec Next.js et Prisma. Vous apprendrez à modéliser les données, créer des endpoints sécurisés et afficher une interface interactive. Ce guide s'adresse aux développeurs ayant déjà une expérience avec TypeScript et les bases de données relationnelles.

Prérequis

  • Node.js 20+
  • Connaissances de base en TypeScript et Prisma
  • PostgreSQL installé
  • Compte Vercel ou serveur de déploiement

Initialisation du projet

terminal
npx create-next-app@latest referentiel-competences --yes
cd referentiel-competences
npm install prisma @prisma/client
npx prisma init

Cette commande crée un projet Next.js et installe Prisma pour gérer la base de données. Le fichier prisma/schema.prisma sera utilisé pour définir le modèle.

Modélisation des données

prisma/schema.prisma
model Competence {
  id          Int      @id @default(autoincrement())
  nom         String
  description String?
  niveau      Int
  categorie   String
  createdAt   DateTime @default(now())
}

Ce modèle définit une compétence avec son nom, niveau et catégorie. Il est simple mais extensible pour ajouter des relations avec les employés.

Migration et seed

terminal
npx prisma migrate dev --name init
npx prisma db seed

La migration crée les tables et le seed permet d'insérer des données de test pour valider rapidement le système.

API GET compétences

app/api/competences/route.ts
import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function GET() {
  const competences = await prisma.competence.findMany();
  return NextResponse.json(competences);
}

Cet endpoint retourne toutes les compétences. Il est prêt pour la production avec gestion d'erreurs à ajouter.

Composant liste compétences

components/CompetenceList.tsx
import React from 'react';

interface Competence {
  id: number;
  nom: string;
  niveau: number;
}

export default function CompetenceList({ competences }: { competences: Competence[] }) {
  return (
    <ul>
      {competences.map((c) => (
        <li key={c.id}>{c.nom} - Niveau {c.niveau}</li>
      ))}
    </ul>
  );
}

Ce composant React affiche la liste de manière simple et réutilisable. Il peut être enrichi avec des filtres.

Bonnes pratiques

  • Toujours valider les données côté serveur avec Zod
  • Utiliser des transactions Prisma pour les opérations groupées
  • Séparer les modèles de données des DTOs
  • Ajouter des index sur les champs fréquemment filtrés
  • Documenter chaque compétence avec des exemples concrets d'utilisation

Erreurs courantes à éviter

  • Oublier d'exécuter les migrations après modification du schéma
  • Ne pas gérer les niveaux de compétence comme des enums
  • Ignorer la pagination sur les listes volumineuses
  • Stocker les descriptions en dur au lieu de les rendre éditables

Pour aller plus loin

Découvrez nos formations avancées sur la gestion des compétences et le développement d'applications RH sur https://learni-group.com/formations.

Comment créer un référentiel de compétences en 2026 | Learni