Les couches du Feature-Sliced Design

FSD définit 7 couches standard, mais dans la pratique on peut adapter ce nombre au contexte du projet. Voici les couches les plus courantes.

Shared : La fondation

La couche shared contient tout ce qui est réutilisable et sans connaissance métier :

• Composants UI génériques (Button, Input, Modal)
• Utilitaires (formatDate, slugify)
• Types partagés
• Configuration globale

// shared/lib/date.ts
export function formatDate(date: Date): string {
  return new Intl.DateTimeFormat('fr-FR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }).format(date);
}

Entities : Le domaine

La couche entities modélise les concepts métier de l’application. Chaque entité possède ses types, sa logique de récupération et ses composants de présentation.

Par exemple, dans un blog, l’entité principale est l’article :

• model/types.ts : les interfaces TypeScript
• model/get-all-articles.ts : la logique de récupération
• ui/ArticleCard.astro : le composant de présentation

Widgets : L’assemblage

Les widgets assemblent des entités et des composants shared pour former des blocs fonctionnels autonomes. Un widget est auto-suffisant : il contient tout ce dont il a besoin.

Règle d’import

La règle d’or : les imports ne vont que vers le bas. shared ← entities ← widgets ← pages ← app.

Jamais l’inverse. Jamais de cross-import entre slices d’une même couche.