Skip to content
Learni
View all tutorials
Développement Web

How to Build a Skills Repository with Next.js in 2026

18 minINTERMEDIATE
Next.jsPrismaCompétences
Lire en français

Introduction

A structured skills repository is essential for aligning teams with strategic objectives. It helps identify skill gaps, plan training sessions, and optimize recruitment efforts. In this tutorial, we will build a complete web application using Next.js and Prisma. You will learn how to model data, create secure endpoints, and display an interactive interface. This guide is intended for developers with prior experience in TypeScript and relational databases.

Prerequisites

  • Node.js 20+
  • Basic knowledge of TypeScript and Prisma
  • PostgreSQL installed
  • Vercel account or deployment server

Project Initialization

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

This command creates a Next.js project and installs Prisma for database management. The prisma/schema.prisma file will be used to define the data model.

Data Modeling

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

This model defines a skill with its name, level, and category. It is simple yet extensible for adding relationships with employees.

Migration and Seed

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

The migration creates the tables and the seed inserts test data to quickly validate the system.

GET Skills API

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);
}

This endpoint returns all skills. It is production-ready with error handling to be added.

Skills List Component

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>
  );
}

This React component displays the list in a simple and reusable way. It can be enhanced with filters.

Best Practices

  • Always validate data on the server side with Zod
  • Use Prisma transactions for batch operations
  • Separate data models from DTOs
  • Add indexes on frequently filtered fields
  • Document each skill with concrete usage examples

Common Errors to Avoid

  • Forgetting to run migrations after modifying the schema
  • Not handling skill levels as enums
  • Ignoring pagination on large lists
  • Hardcoding descriptions instead of making them editable

Going Further

Discover our advanced courses on skills management and HR application development at https://learni-group.com/formations.