Skill-Gruppe Web Frameworks

Umfassender Leitfaden für die Entwicklung moderner Full-Stack-Webanwendungen mit Next.js, Turborepo und RemixIcon.

Überblick

Diese Skill-Gruppe kombiniert drei leistungsstarke Tools für die Webentwicklung:

Next.js – React-Framework mit SSR, SSG, RSC und Optimierungsfunktionen Turborepo – Hochperformantes Monorepo-Build-System für JavaScript/TypeScript RemixIcon – Icon-Bibliothek mit über 3100 Symbolen im outlined- und filled-Stil

Wann diese Skill-Gruppe verwenden

Erstellung neuer Full-Stack-Webanwendungen mit modernem React
Einrichtung von Monorepos mit mehreren Apps und gemeinsam genutzten Paketen
Implementierung von serverseitigem Rendering und statischer Generierung
Optimierung der Build-Leistung durch intelligentes Caching
Erstellung konsistenter Benutzeroberflächen mit professioneller Ikonographie
Verwaltung von Workspace-Abhängigkeiten über mehrere Projekte hinweg
Bereitstellung produktionsreifer Anwendungen mit entsprechender Optimierung

Leitfaden zur Stack-Auswahl

Einzelne Anwendung: Next.js + RemixIcon

Verwenden Sie dies beim Erstellen einer eigenständigen Anwendung:

E-Commerce-Seiten
Marketing-Websites
SaaS-Anwendungen
Dokumentationsseiten
Blogs und Content-Plattformen

Einrichtung:

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

Monorepo: Next.js + Turborepo + RemixIcon

Verwenden Sie dies beim Erstellen mehrerer Anwendungen mit gemeinsamem Code:

Microfrontends
Multi-Tenant-Plattformen
Interne Tools mit gemeinsam genutzter Komponentenbibliothek
Mehrere Apps (Web, Admin, Mobile-Web) mit gemeinsamer Logik
Designsystem mit Dokumentationsseite

Einrichtung:

npx create-turbo@latest my-monorepo
# Konfigurieren Sie dann Next.js-Apps im apps/-Verzeichnis
# Installieren Sie remixicon in den gemeinsamen UI-Paketen

Vergleich der Framework-Funktionen

Funktion	Next.js	Turborepo	RemixIcon
Hauptzweck	Web-Framework	Build-System	UI-Icons
Am besten für	SSR/SSG-Apps	Monorepos	Konsistente Ikonographie
Leistung	Integrierte Optimierung	Caching & parallele Aufgaben	Leichte Fonts/SVG
TypeScript	Vollständige Unterstützung	Vollständige Unterstützung	Typdefinitionen verfügbar

Schnellstart

Next.js-Anwendung

# Neues Projekt erstellen
npx create-next-app@latest my-app
cd my-app

# RemixIcon installieren
npm install remixicon

# Import im Layout
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# Entwicklung starten
npm run dev

Turborepo-Monorepo

# Monorepo erstellen
npx create-turbo@latest my-monorepo
cd my-monorepo

# Struktur:
# apps/web/          – Next.js-Anwendung
# apps/docs/         – Dokumentationsseite
# packages/ui/       – Gemeinsame Komponenten mit RemixIcon
# packages/config/   – Gemeinsame Konfigurationen
# turbo.json         – Pipeline-Konfiguration

# Alle Apps starten
npm run dev

# Alle Pakete bauen
npm run build

RemixIcon-Integration

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

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

Referenznavigation

Next.js-Referenzen:

App Router Architektur – Routing, Layouts, Seiten, parallele Routen
Server-Komponenten – RSC-Muster, Client vs. Server, Streaming
Datenabruf – fetch-API, Caching, Revalidierung, Ladezustände
Optimierung – Bilder, Schriften, Skripte, Bundle-Analyse, PPR

Turborepo-Referenzen:

Einrichtung & Konfiguration – Installation, Workspace-Konfiguration, Paketstruktur
Aufgabenpipelines – Abhängigkeiten, parallele Ausführung, Aufgabenreihenfolge
Caching-Strategien – Lokaler Cache, Remote-Cache, Cache-Invalidierung

RemixIcon-Referenzen:

Integrationsleitfaden – Installation, Verwendung, Anpassung, Barrierefreiheit

Häufige Muster und Arbeitsabläufe

Muster 1: Full-Stack-Monorepo

my-monorepo/
├── apps/
│   ├── web/              # Kundenseitige Next.js-App
│   ├── admin/            # Admin-Dashboard (Next.js-App)
│   └── docs/             # Dokumentationsseite
├── packages/
│   ├── ui/               # Gemeinsame UI mit RemixIcon
│   ├── api-client/       # API-Client-Bibliothek
│   ├── config/           # ESLint-, TypeScript-Konfigurationen
│   └── types/            # Gemeinsame TypeScript-Typen
└── turbo.json            # Build-Pipeline

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"]
    }
  }
}

Muster 2: Gemeinsame Komponentenbibliothek

// 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 />}>Home</Button>;
}

Muster 3: Optimierter Datenabruf

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

// Statische Generierung zur Build-Zeit
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

// Stündliche Revalidierung
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>;
}

Muster 4: Monorepo-CI/CD-Pipeline

# .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 }}

Hilfsskripte

Python-Hilfsprogramme im scripts/-Verzeichnis:

nextjs_init.py – Next.js-Projekt mit Best Practices initialisieren turborepo_migrate.py – Bestehendes Monorepo zu Turborepo konvertieren

Verwendungsbeispiele:

# Neue Next.js-App mit TypeScript und empfohlener Einrichtung initialisieren
python scripts/nextjs_init.py --name my-app --typescript --app-router

# Bestehendes Monorepo zu Turborepo migrieren (mit Probelauf)
python scripts/turborepo_migrate.py --path ./my-monorepo --dry-run

# Tests ausführen
cd scripts/tests
pytest

Best Practices

Next.js:

Standardmäßig Server-Komponenten verwenden, Client-Komponenten nur bei Bedarf
Richtige Lade- und Fehlerzustände implementieren
Image-Komponente für automatische Optimierung verwenden
Korrekte Metadaten für SEO setzen
Caching-Strategien nutzen (force-cache, revalidate, no-store)
Stabile Next.js-Sicherheitsreleases getrennt von Canary-Framework-Abweichungen verfolgen. Produktions-Apps sollten auf einer gepatchten stabilen Release-Linie bleiben und Canary-Pins nur beim Testen eines spezifischen Upstream-Problems verwenden.

Turborepo:

Monorepo mit klarer Trennung strukturieren (apps/, packages/)
Aufgabenabhängigkeiten korrekt definieren (^build für topologisch)
Ausgaben für korrektes Caching konfigurieren
Remote-Caching für Teamzusammenarbeit aktivieren
Filter verwenden, um Aufgaben nur für geänderte Pakete auszuführen

RemixIcon:

Line-Stil für minimale Oberflächen, Fill für Betonung verwenden
24x24-Raster-Ausrichtung für gestochen scharfe Darstellung einhalten
aria-labels für Barrierefreiheit bereitstellen
currentColor für flexibles Theming verwenden
Webfonts für mehrere Icons bevorzugen, SVG für einzelne Icons

Ressourcen

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

Umsetzungs-Checkliste

Erstellung mit diesem Stack:

kit:web-frameworks

Was ist kit:web-frameworks?

In Ihrer bevorzugten KI fragen

Dokumentation