Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Clean Architecture en React, Next.js y TypeScript consiste en mantener las reglas del negocio y los casos de uso separados de los componentes, el enrutamiento y los servicios externos. Next.js aporta convenciones de archivos, rutas y renderizado; no impone una arquitectura de dominio. En el App Router, una opción práctica es dejar las entradas de ruta delgadas, organizar capacidades en funciones o módulos de características y usar componentes de cliente solo donde la interacción del navegador lo requiere.
Qué significa Clean Architecture en una aplicación frontend
Clean Architecture es una decisión de diseño de la aplicación, no una convención de Next.js. Su idea central es que las reglas importantes y los casos de uso no dependan directamente de detalles de presentación —como React— ni de proveedores concretos de datos. Las capas y los límites solo valen la pena si aíslan reglas significativas, dependencias reemplazables o puntos útiles de prueba.
En una aplicación frontend, esto no exige crear una entidad, un repositorio, un puerto y un caso de uso para cada pantalla. Un proyecto pequeño puede ser más fácil de mantener con menos capas e indirección. Añade estructura cuando ayude a que una capacidad sea cohesiva o a evitar que las reglas del producto queden dispersas entre componentes y rutas.
Cómo se relaciona la arquitectura con Next.js
Next.js es un framework de React para aplicaciones web full-stack. Su App Router se basa en el sistema de archivos y utiliza funciones recientes de React, como Server Components, Suspense y Server Functions, según la documentación oficial de App Router, actualizada el 25 de marzo de 2026.
#1 Best Overall
Las carpetas y archivos reservados por el framework definen rutas y puntos de entrada; no determinan cómo debes modelar el dominio. La documentación de estructura de proyectos describe app para App Router, pages para Pages Router, public para recursos estáticos y src como opción. La ubicación de módulos de características, dominio o infraestructura es una convención que el equipo elige.
App Router: rutas, páginas y layouts
En el App Router, las carpetas ayudan a definir segmentos de ruta. Un archivo page exporta la interfaz específica de una ruta; un layout proporciona interfaz compartida que puede persistir al navegar. Esta distinción, explicada en la guía de layouts y páginas, permite mantener lo compartido en el nivel de layout y la composición propia de una ruta en su página.
Pages Router en aplicaciones existentes
Si tu proyecto usa Pages Router, conserva sus convenciones de rutas en pages/ y aplica los límites de arquitectura en el código de características, dominio e infraestructura. No es necesario migrar de router solo para adoptar una arquitectura más limpia; la estructura elegida para el código de la aplicación es independiente de esa decisión.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Una estructura posible para una aplicación Next.js
Esta organización es una opción, no una regla oficial de Next.js. Ajusta los nombres y niveles a las necesidades reales del proyecto:
src/
app/ # Rutas, layouts y adaptación al framework
features/ # Capacidades coherentes: catálogo, cuenta, pedidos
catalog/
components/ # Presentación e interacción de la capacidad
use-cases/ # Operaciones de aplicación, si aportan claridad
services/ # Orquestación específica de la característica
domain/ # Conceptos y reglas estables, si se justifican
infrastructure/ # Adaptadores para API, base de datos u otros serviciosUna característica puede contener tanto sus componentes como su lógica específica para mantener el código relacionado junto. Extrae a domain/ reglas que sean estables y compartidas de verdad; usa infrastructure/ para adaptadores que conectan con detalles externos. Si una capacidad sencilla no gana claridad con subcarpetas adicionales, mantenla más plana.
Dónde poner la lógica de negocio en una aplicación React
Las reglas del producto no deberían depender de cómo React representa una pantalla. La lógica de una capacidad puede vivir en un módulo de característica o, cuando sea estable y compartida, en el dominio. Los componentes presentan datos y gestionan interacciones; las rutas traducen información del framework a entradas de aplicación y conectan la operación con la interfaz.
Mantén delgadas las entradas de ruta
Una página de ruta puede leer parámetros, obtener datos apropiados para su contexto y llamar a una operación de aplicación. Después adapta el resultado a la interfaz. Evita que la página se convierta en el único lugar donde se mezclan reglas del negocio, consultas específicas de un proveedor y detalles de presentación.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →// Esquema ilustrativo; la operación concreta depende de tu aplicación.
export default async function ProductPage({ params }) {
const product = await getProductForPage(params.id);
return <ProductView product={product} />;
}El ejemplo muestra la separación de responsabilidades, no una API universal ni una implementación completa de tipos o validación. El módulo de aplicación puede decidir qué operación ejecutar; el adaptador de infraestructura puede encargarse de hablar con el proveedor de datos; el componente muestra el resultado.
Separa reglas de presentación y efectos del navegador
Deja el estado interactivo, los controladores de eventos y los efectos que requieren el navegador en componentes de React apropiados. Si una regla tiene sentido fuera de la interfaz —por ejemplo, una condición de elegibilidad o un cálculo propio del producto—, ubícala en una función o módulo de aplicación que pueda probarse sin montar toda la pantalla.
Cómo elegir entre Server Components y Client Components
En App Router, layouts y páginas son Server Components por defecto. La guía oficial de Server y Client Components, actualizada el 16 de marzo de 2026, señala que este enfoque permite obtener datos desde la interfaz, opcionalmente almacenar el resultado en caché y transmitirlo al cliente. Esa es una descripción de capacidades del framework, no una garantía de que cualquier consulta deba ejecutarse en el servidor.
| Considera | Server Component | Client Component |
|---|---|---|
| Interacción requerida | Adecuado para interfaz que no necesita estado del navegador ni controladores de eventos. | Úsalo cuando necesites estado, controladores de eventos, efectos, hooks personalizados o APIs del navegador. |
| Acceso a datos y secretos | Puede acceder a datos cerca de su origen y mantener secretos en el servidor. | No debe recibir secretos; pásale solo los datos que necesita presentar o modificar. |
| JavaScript del navegador | Ayuda a reducir el JavaScript enviado al navegador. | Sus módulos y dependencias importados forman parte del grafo cliente. |
| Experiencia de renderizado | Puede aprovechar la transmisión progresiva y el flujo de datos del servidor. | Permite interacción en el navegador; considera deliberadamente cómo llegan los datos y cuándo se actualiza la interfaz. |
No hay un umbral numérico universal para decidir. Sopesa las capacidades necesarias para cada parte de la interfaz, la sensibilidad de los datos, el JavaScript añadido al cliente, el paso de datos entre servidor y navegador, y la experiencia de renderizado que necesita la pantalla.
Recommended Free Tools
Mantén pequeña la frontera de cliente
La directiva use client marca una frontera en el grafo de módulos: los imports y módulos descendientes de esa entrada se incluyen en el paquete cliente. Por eso, colócala tan cerca como sea práctico de la interacción que la requiere. Una página completa no tiene que ser cliente solo porque un control aislado necesite estado.
Best Value
Haz deliberado el paso de datos del servidor al cliente: transmite únicamente lo necesario para la interfaz y no expongas información sensible. Mantén el acceso a secretos y datos protegidos en el servidor. La frontera entre ambos entornos es una decisión de arquitectura además de una decisión de renderizado.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Cómo organizar tipos y validar datos
Next.js ofrece configuración y comprobación de TypeScript, un plugin de TypeScript, tipos conscientes de rutas y soporte documentado para Server Components asíncronos. La guía oficial de TypeScript, actualizada el 25 de marzo de 2026, describe esas capacidades. No significan que una respuesta de API, una entrada de usuario o una regla de negocio sea automáticamente válida.
Define tipos claros en los límites entre parámetros de ruta, lógica de aplicación, adaptadores de infraestructura e interfaz. Trata los datos externos como no confiables: valida su forma en tiempo de ejecución antes de asumir que cumple un tipo estático. TypeScript ayuda a detectar errores en el código que compila, pero una anotación no comprueba los bytes recibidos de una red.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Next.js facilita el flujo de datos en App Router, pero no prescribe una base de datos ni un proveedor de contenido. Mantén la integración con esos sistemas detrás de módulos o adaptadores adecuados a tu aplicación, en lugar de convertir una elección de infraestructura en una dependencia de las reglas del dominio.
Cuándo añadir capas o extraer código compartido
- Deja el código cerca de la característica cuando solo una capacidad lo utiliza y la proximidad facilita entenderla.
- Extrae reglas al dominio cuando representen conceptos estables o se compartan entre varias capacidades sin depender de React o de un proveedor.
- Añade un caso de uso o servicio de aplicación cuando una operación coordine varias reglas o dependencias y la extracción facilite la prueba o la lectura.
- Añade un adaptador de infraestructura cuando debas aislar un proveedor externo, acceso a datos u otro detalle reemplazable.
- Evita abstracciones ceremoniales si solo renombran una llamada sencilla o hacen más difícil seguir el flujo sin aportar aislamiento útil.
La dirección de dependencia importa más que la cantidad de carpetas: el núcleo de reglas no debería necesitar importar componentes visuales ni clientes específicos de infraestructura. La ruta y la interfaz pueden depender de la operación de aplicación que necesitan, mientras los adaptadores implementan el acceso concreto a servicios externos.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
