Patrones de arquitectura para proyectos escalables con Next.js y App Router

🧱 Patrones de arquitectura para proyectos escalables con Next.js y App Router

🧑‍💻 Introducción

Con la llegada del App Router en Next.js 13 y su madurez en la versión 14, la forma en que estructuramos nuestras aplicaciones cambió. Ya no se trata solo de crear páginas: ahora podemos pensar en layouts compartidos, segmentación avanzada por rutas, server components, y una arquitectura que pueda escalar en equipos grandes o proyectos a largo plazo.

En este artículo comparto la arquitectura que estoy usando actualmente en un proyecto real, combinando Next.js con App Router, y aplicando principios de modularización, separación de lógica, testing y mantenibilidad.

📁 Estructura moderna con App Router

La base de todo proyecto con App Router parte desde la carpeta /app. Aquí se define la estructura visual de la aplicación mediante layout.tsx, page.tsx, not-found.tsx, y la segmentación por rutas.

src/
├── app/
│ ├── (auth)/
│ │ ├── login/
│ │ ├── register/
│ │ └── layout.tsx
│ ├── configuracion/
│ ├── cotizaciones/
│ ├── layout.tsx
│ ├── not-found.tsx
│ └── page.tsx

Agrupar rutas como (auth) permite tener layouts específicos, aislar funcionalidades, y mejorar el orden de navegación. El uso de not-found.tsx mejora la UX y el control de errores.

🧩 Separación modular por features

Además del uso de App Router, implemento una capa features/ donde cada módulo de negocio se encapsula con sus propios componentes, hooks, datos y servicios.

features/
├── auth/
├── configuracion/
├── cotizaciones/
└── landing/

Esta organización permite escalar en equipos, mantener independencia entre módulos, y tener un enfoque de Feature-Sliced Design.

🔌 Server Components y lógica desacoplada

Para mantener la lógica desacoplada del renderizado, uso data/ dentro de cada feature y funciones async que pueden ser utilizadas directamente desde Server Components.

// features/configuracion/data/tarifas.ts
export async function getTarifas() {
const res = await fetch(`${process.env.API_URL}/tarifas`, { cache: 'no-store' })
return res.json()
}

Luego, esa lógica se puede consumir directamente en el archivo page.tsx del módulo configuracion, manteniendo una clara separación de responsabilidades.

📦 Buenas prácticas: hooks, lib, actions

En la raíz del proyecto tengo carpetas para lógica reutilizable:

hooks/
use-mobile.ts
lib/
apollo/
helpers.ts
utils.ts

Este enfoque me permite extraer funciones comunes (como detección de móvil, lógica de Apollo Client o formateadores) sin mezclarlas con componentes visuales.

// hooks/use-mobile.ts
export const useMobile = () => {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
setIsMobile(window.innerWidth < 768);
}, []);
return isMobile;
};

🌍 Internacionalización, metadata y SEO

Manejo las imágenes, íconos y configuraciones SEO desde public/ y archivos como robots.txt, favicon.ico, además de utilizar generateMetadata() desde el App Router para mejorar el SEO de cada página.

// app/configuracion/page.tsx
export const metadata: Metadata = {
title: 'Configuración del sistema',
description: 'Panel de configuración para administrar usuarios y parámetros del sistema.',
}

🧪 Testing y control de calidad

Actualmente uso TypeScript con ESLint y Prettier para mantener un código limpio. La arquitectura permite agregar fácilmente herramientas como:

• Jest o Vitest para pruebas unitarias
• Playwright para pruebas end-to-end
• Husky + lint-staged para validación en pre-commits

📘 Conclusión y recursos

Esta estructura me ha permitido trabajar de forma más organizada, escalar fácilmente entre proyectos frontend y fullstack, y mantener la mantenibilidad a largo plazo.

Si quieres implementar esta arquitectura desde cero, puedes descargar el template base que uso como punto de partida:

🔗 Repositorio base – Plantilla Next.js App Router

Este artículo forma parte de mi blog profesional donde comparto prácticas reales como desarrollador y líder técnico. Si te interesa seguir leyendo sobre buenas prácticas, DevOps, backend, o gestión de proyectos, puedes seguir explorando 👉 jojanes.com/blog