Grupo de Habilidades de Frameworks Web

Guía completa para construir aplicaciones web modernas de pila completa usando Next.js, Turborepo y RemixIcon.

Resumen

Este grupo de habilidades combina tres herramientas potentes para el desarrollo web:

Next.js - Framework de React con SSR, SSG, RSC y funcionalidades de optimización Turborepo - Sistema de compilación de monorepo de alto rendimiento para JavaScript/TypeScript RemixIcon - Biblioteca de iconos con más de 3,100 iconos con estilo de contorno y relleno

Cuándo usar este grupo de habilidades

Construir nuevas aplicaciones web de pila completa con React moderno
Configurar monorepos con múltiples aplicaciones y paquetes compartidos
Implementar renderizado del lado del servidor y generación estática
Optimizar el rendimiento de compilación con caché inteligente
Crear una interfaz de usuario consistente con iconografía profesional
Gestionar dependencias entre espacios de trabajo en varios proyectos
Desplegar aplicaciones listas para producción con optimización adecuada

Guía de selección de stack

Aplicación única: Next.js + RemixIcon

Úsalo al construir una aplicación independiente:

Sitios de comercio electrónico
Sitios web de marketing
Aplicaciones SaaS
Sitios de documentación
Blogs y plataformas de contenido

Configuración:

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

Monorepo: Next.js + Turborepo + RemixIcon

Úsalo al construir múltiples aplicaciones con código compartido:

Microfrontends
Plataformas multiinquilino
Herramientas internas con biblioteca de componentes compartida
Múltiples aplicaciones (web, admin, móvil-web) compartiendo lógica
Sistema de diseño con sitio de documentación

Configuración:

npx create-turbo@latest my-monorepo
# Luego configurar aplicaciones Next.js en el directorio apps/
# Instalar remixicon en paquetes de UI compartidos

Comparación de funcionalidades de frameworks

Funcionalidad	Next.js	Turborepo	RemixIcon
Uso principal	Framework web	Sistema de compilación	Iconos de UI
Mejor para	Aplicaciones SSR/SSG	Monorepos	Iconografía consistente
Rendimiento	Optimización incorporada	Caché y tareas paralelas	Fuentes/SVG ligeros
TypeScript	Soporte completo	Soporte completo	Definiciones de tipos disponibles

Inicio rápido

Aplicación Next.js

# Crear nuevo proyecto
npx create-next-app@latest my-app
cd my-app

# Instalar RemixIcon
npm install remixicon

# Importar en layout
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# Iniciar desarrollo
npm run dev

Monorepo Turborepo

# Crear monorepo
npx create-turbo@latest my-monorepo
cd my-monorepo

# Estructura:
# apps/web/          - Aplicación Next.js
# apps/docs/         - Sitio de documentación
# packages/ui/       - Componentes compartidos con RemixIcon
# packages/config/   - Configuraciones compartidas
# turbo.json         - Configuración de pipelines

# Ejecutar todas las apps
npm run dev

# Compilar todos los paquetes
npm run build

Integración de RemixIcon

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

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

Navegación de referencias

Referencias de Next.js:

Arquitectura de App Router - Enrutamiento, layouts, páginas, rutas paralelas
Componentes de Servidor - Patrones RSC, cliente vs servidor, streaming
Obtención de Datos - API fetch, caché, revalidación, estados de carga
Optimización - Imágenes, fuentes, scripts, análisis de bundle, PPR

Referencias de Turborepo:

Configuración e Instalación - Instalación, configuración de espacio de trabajo, estructura de paquetes
Pipelines de Tareas - Dependencias, ejecución paralela, orden de tareas
Estrategias de Caché - Caché local, caché remota, invalidación de caché

Referencias de RemixIcon:

Guía de Integración - Instalación, uso, personalización, accesibilidad

Patrones y Flujos de Trabajo Comunes

Patrón 1: Monorepo de Pila Completa

my-monorepo/
├── apps/
│   ├── web/              # App Next.js orientada al cliente
│   ├── admin/            # App Next.js para panel de administración
│   └── docs/             # Sitio de documentación
├── packages/
│   ├── ui/               # UI compartida con RemixIcon
│   ├── api-client/       # Biblioteca de cliente API
│   ├── config/           # Configuraciones de ESLint, TypeScript
│   └── types/            # Tipos TypeScript compartidos
└── turbo.json            # Pipeline de compilación

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

Patrón 2: Biblioteca de Componentes Compartida

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

Patrón 3: Obtención de Datos Optimizada

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

// Generación estática en tiempo de compilación
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

// Revalidar cada hora
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>;
}

Patrón 4: Pipeline CI/CD de 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 de Utilidad

Utilidades de Python en el directorio scripts/:

nextjs_init.py - Inicializar proyecto Next.js con mejores prácticas turborepo_migrate.py - Convertir un monorepo existente a Turborepo

Ejemplos de uso:

# Inicializar nueva app Next.js con TypeScript y configuración recomendada
python scripts/nextjs_init.py --name my-app --typescript --app-router

# Migrar monorepo existente a Turborepo con simulación
python scripts/turborepo_migrate.py --path ./my-monorepo --dry-run

# Ejecutar pruebas
cd scripts/tests
pytest

Mejores Prácticas

Next.js:

Por defecto usa Componentes de Servidor, usa Componentes de Cliente solo cuando sea necesario
Implementa estados de carga y error adecuados
Usa el componente Image para optimización automática
Configura metadatos adecuados para SEO
Aprovecha las estrategias de caché (force-cache, revalidate, no-store)
Realiza un seguimiento de las versiones estables de seguridad de Next.js por separado del desvío del framework canary. Las aplicaciones de producción deben permanecer en una línea estable parcheada y evitar dependencias exclusivas de canary a menos que se esté probando un problema específico de origen.

Turborepo:

Estructura el monorepo con separación clara (apps/, packages/)
Define correctamente las dependencias de tareas (^build para topológico)
Configura las salidas para un caché adecuado
Habilita el caché remoto para colaboración en equipo
Usa filtros para ejecutar solo tareas en paquetes modificados

RemixIcon:

Usa estilo de línea para interfaces minimalistas, relleno para énfasis
Mantén una alineación de cuadrícula de 24x24 para un renderizado nítido
Proporciona etiquetas aria para accesibilidad
Usa currentColor para theming flexible
Prefiere fuentes web para múltiples iconos, SVG para iconos individuales

Recursos

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

Lista de Verificación de Implementación

Construyendo con este stack:

kit:web-frameworks

¿Qué es kit:web-frameworks?

Preguntar en tu IA favorita

Documentación