Creación de plantillas iniciales reutilizables para Next.js a fin de evitar código genérico
Aprenda cómo un desarrollador reemplazó las tareas repetitivas de limpieza en Next.js por un conjunto cada vez mayor de plantillas básicas para tiendas online y páginas de aterrizaje.
Cada desarrollador que ha trabajado con Next.js ha pasado por este ritual exacto.
Escribes:
npx create-next-app
…y de repente te encuentras mirando esa enorme página de bienvenida brillante de Vercel.
Parece fantástica: es limpia, moderna y claramente está diseñada para impresionar.
El problema es que en el momento en que estás listo para crear algo real, esa misma página de bienvenida se convierte en lo primero que eliminas. Durante casi dos años, cada vez que comenzaba un nuevo proyecto se repetía una secuencia familiar:
- eliminar la página de bienvenida
- eliminar los componentes de ejemplo
- eliminar el estilo de ejemplo
- eliminar las rutas API de ejemplo
- eliminar las fuentes de ejemplo
- eliminar el diseño de ejemplo
- eliminar los metadatos de ejemplo
Una y otra vez, proyecto tras proyecto.
En algún momento, repetir esa tarea dejó de parecer razonable.
Esa frustración fue lo que llevó a crear en su lugar un plantilla personal de inicio.
Lo que comenzó como un único preset ligero eventualmente se convirtió en dos, luego en tres, y ahora está formando una pequeña colección de puntos de partida para Next.js limpios y actualizados.
Aquí está cómo ocurrió esa evolución.
El verdadero problema: un inicio llamativo, no uno minimalista
Next.js en sí es excelente, pero su estructura por defecto está diseñada para demostrar sus capacidades, no para ofrecerte un lienzo en blanco sobre el que trabajar.
Desde el primer uso obtienes:
- una página de aterrizaje al estilo marketing
- efectos de animación
- fondos con degradados
- rutas de ejemplo
- componentes de ejemplo
- estilos de ejemplo
- metadatos de ejemplo
- fuentes de ejemplo
Eso es realmente útil si eres nuevo en este framework. Pero si ya sabes lo que haces y solo quieres un punto de partida básico, resulta un estorbo.
El objetivo era algo mucho más simple:
- sin ruido visual adicional
- sin interfaz de demostración
- sin rutas de marcador de posición
- sin archivos que no se necesiten
- una base realmente en blanco, lista para desarrollar
Así que eso es lo que se creó.
Primer preset: El inicio mínimo
Esa fue el primer intento.
Un inicio compacto y moderno para Next.js que incluye:
- versiones actuales de las dependencias
- integración con TailwindCSS
- TypeScript 6.0.3 (una versión estable)
- la estructura estándar de carpetas del App Router
- sin componentes de demostración en absoluto
- sin elementos innecesarios en la página de inicio que eliminar
Correspondía a lo que realmente se necesitaba para la configuración diaria de proyectos.
También quedó claro bastante rápido que otros desarrolladores probablemente enfrentaban la misma molestia.
Segundo preset: Punto de partida para una tienda en línea
Con el preset mínimo ya implementado, lo siguiente que se necesitaba era algo con un poco más de estructura integrada, adecuado para:
- páginas de catálogo de productos
- diseños de tienda en línea
- prototipos de comercio electrónico
- aplicaciones full-stack generales
Eso llevó a un segundo preset que incluye:
- una interfaz limpia
- un diseño en forma de cuadrícula para productos
- una estructura básica de filtrado
- las bases necesarias para agregar una base de datos y sistema de autenticación
- componentes de interfaz de usuario modernos
- la misma versión estable de TypeScript
No está pensado como una solución completa para comercio electrónico, sino simplemente como una base sólida para comenzar.
Tercer preset: Plantilla de página principal de producto
Luego surgió otra conclusión:
La mayoría de los desarrolladores prefieren no crear una página de aterrizaje desde cero cada vez.
Por eso se añadió un tercer preset que ofrecía:
- una sección principal limpia
- un espacio para resaltar el producto
- un bloque de llamada a la acción
- un diseño responsive
- una configuración mínima requerida
- una personalización sencilla
Es adecuado para:
- productos SaaS
- páginas de lanzamiento
- sitios de marketing
- muestra simple de proyectos
A este punto ya había tres presets, cada uno abordando una necesidad práctica distinta.
Por qué se eligió TypeScript 6.0.3 como estándar
Next.js 16 ya tiene una versión estable, pero TypeScript 7 aún no se ha implementado completamente en todo el ecosistema.
Detalles como los decoradores, el comportamiento de emisión y la resolución de módulos aún se están perfeccionando en diversas herramientas.
Ante esto, se estableció una guía sencilla:
Cada preset utiliza TypeScript 6.0.3, una versión estable de TS6, hasta que Vercel confirme compatibilidad total con TypeScript 7.
Esa decisión mantiene los presets predecibles, fiables y accesibles para los principiantes.
Un resultado inesperado: un ecosistema en crecimiento
Nunca hubo intención de crear toda una familia de plantillas, mantener varios starters al mismo tiempo ni redactar documentación para ninguno de ellos.
Pero una vez que existieron:
- un starter mínimo
- un starter para tiendas online
- un starter para páginas de aterrizaje
…se hizo evidente que esto se había convertido en algo más significativo.
Había comenzado a formarse un pequeño ecosistema de puntos de partida modernos y sin desorden para Next.js.
Era exactamente el tipo de recurso que habría sido útil mucho antes.
Mirando hacia adelante
El plan es seguir expandiéndolo gradualmente, con ideas como:
- documentación mejorada
- despliegues de demostraciones en tiempo real
- preajustes adicionales
- posiblemente una herramienta CLI
- posiblemente su presentación en un mercado de plantillas
Nada de esto es urgente; solo avances incrementales con el tiempo.
Pensamientos finales
Nada de esto comenzó como un intento por convertirse en mantenedor de plantillas. Surgió simplemente porque borrar una y otra vez la misma página de inicio de Vercel se volvió aburrido. A menudo, las herramientas más útiles nacen al resolver los propios problemas recurrentes.
Si eres un desarrollador de Next.js que busca:
- una estructura de proyecto limpia
- dependencias actualizadas
estos presets pueden ahorrarte el mismo tiempo que ya han ahorrado durante su creación.
https://github.com/vedanshshetti/nextjs-preset
Lecturas relacionadas
- Construyendo una página de detalles de película resiliente con Next.js App Router — Aprende cómo obtener y almacenar en caché los datos de la API OMDB correctamente en Next.js App Router utilizando componentes de servidor asíncronos, parámetros esperados y un manejo real de 404.
- Lecciones desde el envío de un SaaS en Next.js y la creación de un CLI de andamiaje — Explica las decisiones fundamentales: elección de tecnologías, autenticación, multiarrendatario, facturación y gestión de estado—además de cómo crear un CLI que agilice la configuración de proyectos en Next.js.
- Configurando Prisma 7 en un proyecto de Next.js 16 con TypeScript — Aprenda cómo instalar, configurar y migrar Prisma 7 con PostgreSQL en una aplicación de Next.js 16, y luego crear un cliente singleton para evitar fugas de conexiones.