Next.js Postgres NextAuth Tailwind CSS Template

Qué es

Es una plantilla (starter) oficial de Vercel para construir paneles de administración con Next.js 15 y App Router. Combina TypeScript, autenticación con Auth.js (antes NextAuth), una base de datos Postgres y estilos con Tailwind CSS más componentes de shadcn/ui. Es código abierto bajo licencia MIT y sirve como ejemplo de un stack full-stack moderno listo para desplegar en Vercel.

Para qué sirve

• Arrancar un panel de administración sin montar de cero la autenticación, la base de datos y el diseño.
• Aprender cómo se integran Next.js App Router, Auth.js, Postgres y shadcn/ui en un proyecto real.
• Tener un CRUD de ejemplo: gestión de productos con estados (activo, inactivo, archivado) y seed de datos.
• Desplegar en Vercel con un solo flujo que provisiona la base de datos Postgres.

Cuándo usarlo

Es buena opción cuando vas a desplegar en Vercel y quieres un panel interno con login y datos en Postgres sin invertir tiempo en el andamiaje inicial. Si tu stack no es Next.js o no usas Postgres/Vercel, una plantilla más genérica encajará mejor. Para dashboards muy visuales con muchas gráficas, valora plantillas centradas en visualización de datos.

Ejemplo

Clonar y arrancar el proyecto en local:

git clone https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template
cd nextjs-postgres-nextauth-tailwindcss-template
pnpm install

# Configura las variables de entorno (Postgres y OAuth de GitHub) en .env
pnpm dev

Tras configurar la base de datos Postgres y las credenciales de OAuth de GitHub, el panel queda accesible en local con el login y el CRUD de productos funcionando.

Puntos clave

• Stack actual: Next.js 15 con App Router, TypeScript y componentes de shadcn/ui.
• Autenticación lista con Auth.js mediante OAuth de GitHub.
• Persistencia en Postgres con datos de ejemplo y seed incluido.
• Despliegue directo en Vercel, que provisiona la base de datos durante el proceso.
• Demo pública disponible para ver el resultado antes de clonar.

Ten en cuenta

Está pensada para el ecosistema de Vercel: el flujo de despliegue y la base de datos Postgres asumen esa plataforma, así que fuera de ella tendrás que adaptar la configuración. La autenticación de ejemplo usa solo OAuth de GitHub, por lo que otros proveedores requieren ajustes en Auth.js. Es un punto de partida didáctico: revisa la documentación oficial para mantener las dependencias al día y personaliza el proyecto a fondo.