Saltar al contenido principal
Volver al blog
Next.jsIntegracionesTypeScript

Neon Postgres con Next.js: base de datos serverless

Ray MartínRay Martín
10 min de lectura
Neon Postgres con Next.js: base de datos serverless

Neon es una plataforma de Postgres serverless que aporta funcionalidades como branching instantáneo, escalado a cero y un driver serverless diseñado para aplicaciones web modernas. Combinado con Next.js 16, ofrece una capa de base de datos potente y eficiente en costes que escala automáticamente con tu tráfico.

¿Por qué Neon Postgres?

Postgres tradicional requiere servidores siempre encendidos que te cobran incluso durante periodos de inactividad. Neon cambia esto introduciendo compute serverless que escala a cero cuando no hay actividad:

  • Escalado a cero: Sin cargos cuando tu base de datos está inactiva — perfecto para proyectos personales y entornos de staging.
  • Branching instantáneo: Crea ramas de base de datos como ramas de Git — cada preview deployment obtiene su propia base de datos aislada.
  • Driver serverless: @neondatabase/serverless usa HTTP y WebSockets en lugar de TCP, haciéndolo compatible con Edge y Serverless.
  • Autoescalado: El compute escala de 0.25 a 10+ CU basándose en la carga de queries.
  • Vercel Marketplace: Instalación con un clic y variables de entorno auto-aprovisionadas.

Configurar Neon con Next.js

Opción 1: Vía Vercel Marketplace (recomendado)

La forma más fácil de empezar es a través del Vercel Marketplace, que aprovisiona automáticamente tu base de datos y variables de entorno:

bash 
# Instalar la integración de Neon vía Vercel CLI
vercel integration add neon

# Descargar variables de entorno a tu proyecto local
vercel env pull .env.local

Esto configura automáticamente DATABASE_URL y DATABASE_URL_UNPOOLED en tu proyecto de Vercel.

Opción 2: Configuración manual

bash 
# Instalar el driver serverless
npm install @neondatabase/serverless

Luego añade tu connection string a .env.local:

bash 
DATABASE_URL=postgresql://user:pass@ep-xxx.eu-west-2.aws.neon.tech/neondb?sslmode=require

Usando el Driver Serverless

El driver serverless de Neon (@neondatabase/serverless) está diseñado específicamente para entornos serverless y edge. A diferencia de pg, no requiere conexiones TCP persistentes:

typescript 
// lib/db.ts
import { neon } from '@neondatabase/serverless';

const sql = neon(process.env.DATABASE_URL!);

// Query simple
export async function getUsers() {
  const users = await sql`SELECT * FROM users WHERE active = true`;
  return users;
}

// Query parametrizada (segura contra SQL injection)
export async function getUserById(id: number) {
  const [user] = await sql`SELECT * FROM users WHERE id = ${id}`;
  return user;
}

// Insert con returning
export async function createUser(name: string, email: string) {
  const [user] = await sql`
    INSERT INTO users (name, email)
    VALUES (${name}, ${email})
    RETURNING *
  `;
  return user;
}

Queries desde Server Components

Como los Server Components se ejecutan en el servidor, puedes consultar Neon directamente sin necesidad de una capa API:

tsx 
// app/users/page.tsx
import { neon } from '@neondatabase/serverless';

const sql = neon(process.env.DATABASE_URL!);

export default async function UsersPage() {
  const users = await sql`
    SELECT id, name, email, created_at
    FROM users
    ORDER BY created_at DESC
  `;

  return (
    <main>
      <h1>Usuarios</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <strong>{user.name}</strong> — {user.email}
          </li>
        ))}
      </ul>
    </main>
  );
}

Mutaciones con Server Actions

Usa Server Actions para mutaciones de datos — se integran de forma natural con formularios y revalidación:

typescript 
// app/users/actions.ts
'use server';

import { neon } from '@neondatabase/serverless';
import { revalidatePath } from 'next/cache';
import { z } from 'zod';

const sql = neon(process.env.DATABASE_URL!);

const CreateUserSchema = z.object({
  name: z.string().min(2).max(100),
  email: z.string().email(),
});

export async function createUser(formData: FormData) {
  const parsed = CreateUserSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
  });

  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors };
  }

  await sql`
    INSERT INTO users (name, email)
    VALUES (${parsed.data.name}, ${parsed.data.email})
  `;

  revalidatePath('/users');
}

Database Branching para Preview Deployments

Una de las funcionalidades estrella de Neon es el branching de base de datos. Cada rama es un clon copy-on-write de tu base de datos principal — instantáneo de crear, sin coste de almacenamiento hasta que los datos divergen:

bash 
# Crear una rama para una feature
neonctl branches create --name feat/new-feature --parent main

# Cada preview deployment de Vercel puede usar su propia rama
# Configúralo en los ajustes de tu proyecto Vercel bajo "Neon Integration"

Esto significa que tus preview deployments obtienen bases de datos aisladas con datos reales de producción (o un seed), permitiendo a QA testear sin riesgo.

Usando Neon con Prisma

Si prefieres un ORM, Neon funciona perfectamente con Prisma usando el adaptador serverless:

typescript 
// lib/prisma.ts
import { PrismaClient } from '@prisma/client';
import { neonConfig, Pool } from '@neondatabase/serverless';
import { PrismaNeon } from '@prisma/adapter-neon';

// Habilitar conexiones WebSocket para Prisma
neonConfig.webSocketConstructor = globalThis.WebSocket;

const pool = new Pool({ connectionString: process.env.DATABASE_URL });
const adapter = new PrismaNeon(pool);

export const prisma = new PrismaClient({ adapter });

Connection Pooling

Neon proporciona connection pooling integrado vía PgBouncer. Tu connection string determina si se usa pooling:

  • DATABASE_URL — Conexión con pooling (por defecto, recomendada para queries)
  • DATABASE_URL_UNPOOLED — Conexión directa (necesaria para migraciones y cambios de schema)
typescript 
// Para migraciones (prisma/schema.prisma)
datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DATABASE_URL_UNPOOLED")
}

Consejos de Rendimiento

  • Usa el driver serverless para queries simples: Es más ligero que Prisma y evita overhead de cold start.
  • Habilita autoescalado: Configura min CU a 0.25 para dev, más alto para producción.
  • Usa connection pooling: Siempre usa la URL con pooling para queries de aplicación.
  • Cachea agresivamente: Combina con 'use cache' de Next.js o ISR para reducir queries a la base de datos.
  • Indexa tus queries: Usa EXPLAIN ANALYZE en el editor SQL de Neon para identificar queries lentas.

Conclusión

Neon Postgres es la opción natural de base de datos para aplicaciones Next.js en Vercel. Su arquitectura serverless, branching instantáneo y driver diseñado para el propósito eliminan la fricción tradicional de gestionar bases de datos. Ya sea que estés construyendo un proyecto personal o un SaaS en producción, Neon escala contigo — desde cero hasta miles de queries concurrentes.

Compartir:

Artículos relacionados