Groupe de compétences Frameworks Web

Guide complet pour construire des applications web modernes full-stack avec Next.js, Turborepo et RemixIcon.

Aperçu

Ce groupe de compétences combine trois outils puissants pour le développement web :

Next.js - Framework React avec SSR, SSG, RSC et fonctionnalités d'optimisation Turborepo - Système de build monorepo haute performance pour JavaScript/TypeScript RemixIcon - Bibliothèque d'icônes avec plus de 3 100 icônes en style outline et fill

Quand utiliser ce groupe de compétences

Construire de nouvelles applications web full-stack avec du React moderne
Mettre en place des monorepos avec plusieurs applications et packages partagés
Implémenter le rendu côté serveur et la génération statique
Optimiser les performances de build avec une mise en cache intelligente
Créer des interfaces utilisateur cohérentes avec une iconographie professionnelle
Gérer les dépendances d'espace de travail entre plusieurs projets
Déployer des applications prêtes pour la production avec une optimisation appropriée

Guide de sélection de la stack

Application unique : Next.js + RemixIcon

À utiliser lors de la construction d'une application autonome :

Sites e-commerce
Sites marketing
Applications SaaS
Sites de documentation
Blogs et plateformes de contenu

Configuration :

npx create-next-app@latest mon-app
cd mon-app
npm install remixicon

Monorepo : Next.js + Turborepo + RemixIcon

À utiliser lors de la construction de plusieurs applications avec du code partagé :

Micro-frontends
Plateformes multi-locataires
Outils internes avec une bibliothèque de composants partagée
Plusieurs applications (web, admin, mobile-web) partageant la logique
Système de design avec site de documentation

Configuration :

npx create-turbo@latest mon-monorepo
# Configurer ensuite les applications Next.js dans le répertoire apps/
# Installer remixicon dans les packages d'interface partagés

Comparaison des fonctionnalités du framework

Fonctionnalité	Next.js	Turborepo	RemixIcon
Utilisation principale	Framework web	Système de build	Icônes UI
Idéal pour	Applications SSR/SSG	Monorepos	Iconographie cohérente
Performances	Optimisation intégrée	Mise en cache & tâches parallèles	Polices légères/SVG
TypeScript	Prise en charge complète	Prise en charge complète	Définitions de types disponibles

Démarrage rapide

Application Next.js

# Créer un nouveau projet
npx create-next-app@latest mon-app
cd mon-app

# Installer RemixIcon
npm install remixicon

# Importer dans le layout
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# Démarrer le développement
npm run dev

Monorepo Turborepo

# Créer un monorepo
npx create-turbo@latest mon-monorepo
cd mon-monorepo

# Structure :
# apps/web/          - Application Next.js
# apps/docs/         - Site de documentation
# packages/ui/       - Composants partagés avec RemixIcon
# packages/config/   - Configurations partagées
# turbo.json         - Configuration du pipeline

# Exécuter toutes les applications
npm run dev

# Construire tous les packages
npm run build

Intégration de RemixIcon

// Webfont (HTML/CSS)
<i className="ri-home-line"></i>
<i className="ri-search-fill ri-2x"></i>

// Composant React
import { RiHomeLine, RiSearchFill } from "@remixicon/react"
<RiHomeLine size={24} />
<RiSearchFill size={32} color="blue" />

Navigation de référence

Références Next.js :

Architecture App Router - Routage, layouts, pages, routes parallèles
Composants Serveur - Patterns RSC, client vs serveur, streaming
Récupération de données - API fetch, mise en cache, revalidation, états de chargement
Optimisation - Images, polices, scripts, analyse de bundle, PPR

Références Turborepo :

Configuration & Installation - Installation, config d'espace de travail, structure de package
Pipelines de tâches - Dépendances, exécution parallèle, ordonnancement des tâches
Stratégies de mise en cache - Cache local, cache distant, invalidation de cache

Références RemixIcon :

Guide d'intégration - Installation, utilisation, personnalisation, accessibilité

Motifs & Flux de travail courants

Motif 1 : Monorepo Full-Stack

mon-monorepo/
├── apps/
│   ├── web/              # Application Next.js pour les clients
│   ├── admin/            # Application Next.js pour le tableau de bord admin
│   └── docs/             # Site de documentation
├── packages/
│   ├── ui/               # UI partagée avec RemixIcon
│   ├── api-client/       # Bibliothèque client API
│   ├── config/           # Configs ESLint, TypeScript
│   └── types/            # Types TypeScript partagés
└── turbo.json            # Pipeline de build

turbo.json :

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}

Motif 2 : Bibliothèque de composants partagés

// packages/ui/src/button.tsx
import { RiLoader4Line } from "@remixicon/react";

export function Button({ children, loading, icon }) {
  return (
    <button>
      {loading ? <RiLoader4Line className="animate-spin" /> : icon}
      {children}
    </button>
  );
}

// apps/web/app/page.tsx
import { Button } from "@repo/ui/button";
import { RiHomeLine } from "@remixicon/react";

export default function Page() {
  return <Button icon={<RiHomeLine />}>Accueil</Button>;
}

Motif 3 : Récupération de données optimisée

// app/posts/[slug]/page.tsx
import { notFound } from "next/navigation";

// Génération statique au moment du build
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

// Revalidation chaque heure
async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 },
  });
  if (!res.ok) return null;
  return res.json();
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return <article>{post.content}</article>;
}

Motif 4 : Pipeline CI/CD pour Monorepo

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install
      - run: npx turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

Scripts utilitaires

Utilitaires Python dans le répertoire scripts/ :

nextjs_init.py - Initialiser un projet Next.js avec les bonnes pratiques turborepo_migrate.py - Convertir un monorepo existant en Turborepo

Exemples d'utilisation :

# Initialiser une nouvelle application Next.js avec TypeScript et configuration recommandée
python scripts/nextjs_init.py --name mon-app --typescript --app-router

# Migrer un monorepo existant vers Turborepo en mode dry-run
python scripts/turborepo_migrate.py --path ./mon-monorepo --dry-run

# Exécuter les tests
cd scripts/tests
pytest

Bonnes pratiques

Next.js :

Utiliser les Composants Serveur par défaut, utiliser les Composants Client uniquement lorsque nécessaire
Implémenter des états de chargement et d'erreur appropriés
Utiliser le composant Image pour une optimisation automatique
Définir des métadonnées appropriées pour le référencement (SEO)
Exploiter les stratégies de mise en cache (force-cache, revalidate, no-store)
Suivre séparément les publications de sécurité stables de Next.js par rapport à la dérive de framework canary. Les applications en production doivent rester sur une ligne de version stable patchée et éviter les pins canary uniquement, sauf pour tester un problème amont spécifique.

Turborepo :

Structurer le monorepo avec une séparation claire (apps/, packages/)
Définir correctement les dépendances de tâches (^build pour la topologie)
Configurer les sorties pour une mise en cache appropriée
Activer la mise en cache distante pour la collaboration en équipe
Utiliser des filtres pour exécuter des tâches uniquement sur les packages modifiés

RemixIcon :

Utiliser le style line pour les interfaces minimales, fill pour l'emphase
Maintenir l'alignement sur une grille 24x24 pour un rendu net
Fournir des aria-labels pour l'accessibilité
Utiliser currentColor pour une thématisation flexible
Préférer les webfonts pour plusieurs icônes, SVG pour des icônes uniques

Ressources

Next.js : https://nextjs.org/docs/llms.txt
Turborepo : https://turbo.build/repo/docs
RemixIcon : https://remixicon.com

Liste de vérification pour l'implémentation

Construction avec cette stack :

kit:web-frameworks

Qu'est-ce que kit:web-frameworks ?

Demander à votre IA préférée

Documentation