Organiza tus Tipos con types.ts en Next.js: Mejores Prácticas para Escalabilidad

En proyectos modernos con Next.js y TypeScript, una de las claves para mantener el orden y la escalabilidad es saber dónde y cómo definir tus tipos. Una práctica altamente recomendada es crear un archivo types.ts por cada feature o dominio, y en este artículo te explicamos por qué es una excelente estrategia.

¿Qué es types.ts?

Es un archivo que contiene las interfaces, tipos y enums relacionados a una funcionalidad específica de tu aplicación. Este archivo centraliza el tipado necesario para trabajar con componentes, servicios, hooks o data de esa misma feature.

Beneficios de usar types.ts por Feature

1. Centralización de Tipos

Agrupa todos los contratos de datos en un solo lugar dentro de la feature.

2. Reutilización Consistente

Los tipos se comparten entre componentes, servicios y pruebas sin riesgo de inconsistencias.

3. Escalabilidad Modular

Cada feature mantiene su propio contexto tipado, sin necesidad de depender de tipos globales innecesarios.

4. Mejora la Lectura y el Mantenimiento

Los desarrolladores saben dónde buscar y modificar los tipos si cambia la estructura de datos.

Ejemplo de Archivo types.ts

Supongamos que tienes una feature llamada cotizaciones. Su archivo types.ts podría lucir así:

export interface Cotizacion {
id: number;
cliente: string;
fecha: string;
total: number;
}
export type EstadoCotizacion = "pendiente" | "enviada" | "aprobada" | "rechazada";

Cómo se Usa en tus Componentes

import { Cotizacion } from "./types";
const CotizacionCard = ({ cotizacion }: { cotizacion: Cotizacion }) => (
<div>
<h3>{cotizacion.cliente}</h3>
<p>Total: {cotizacion.total}</p>
</div>
);

Integración con index.ts

Si deseas permitir que estos tipos sean accesibles desde fuera de la feature, puedes reexportarlos en tu archivo index.ts principal:

export * from "./types";

Y luego consumirlos desde cualquier parte de la app:

import { Cotizacion } from "@/features/cotizaciones";

Mejores Prácticas

• Usa types.ts solo para definir estructuras de datos y contratos.
• No mezcles funciones o constantes aquí; mantenlo limpio.
• Si tu feature crece mucho, divide tipos en múltiples archivos y crea un types/index.ts.
• Evita definir tipos generales (como User, Token) aquí; esos deberían estar en src/types/ global.

Conclusión

Organizar tus tipos con types.ts por feature es una estrategia simple pero poderosa que mejora la claridad, escalabilidad y calidad del código en tus proyectos Next.js. Al centralizar tus definiciones de tipo y reusarlas de forma inteligente, logras un código más robusto y fácil de mantener a largo plazo.

Adopta esta práctica y notarás la diferencia desde el primer sprint.