Back4app es el backend detrás de las aplicaciones CRM. Para Next.js obtienes el SDK de Parse en Server Components o Server Actions para contactos y negocios, además de REST y GraphQL—sin servidor que escribir o alojar.

Plantilla Next.js

Plantilla de Backend para la App CRM
Next.js — Guía de Esquema, API y AI

Q: ¿Por qué usar Back4app para una aplicación CRM de Next.js?

Back4app funciona con Next.js CRM: obtén contactos y negocios en Server Components o Server Actions, o usa el SDK de Parse en el cliente para actualizaciones de pipeline en tiempo real.

Q: ¿Cómo consulto negocios por etapa en Next.js?

En Server Actions o en el código del cliente, utiliza el SDK de Parse con new Parse.Query('Deal').equalTo('stage', stage).orderBy('expectedCloseDate').find().

Q: ¿Puedo usar Server Actions con Back4app?

Sí. Llama al Parse REST API o SDK desde Server Actions; pasa el token de sesión en los encabezados para solicitudes autenticadas.

Un esquema de backend de Next.js CRM listo para producción y un Kit de Inicio en Back4app: Contacto, Empresa, Negocio, Actividad, etapas del pipeline, diagrama ER, diccionario de datos, esquema JSON, playground de API, y un prompt de Agente de AI con un clic para desplegar en minutos.

Construido con Agente de IA

Puntos Clave

En esta página obtienes un esquema de CRM listo para producción, un prompt de AI con un clic, y código Next.js paso a paso — para que puedas lanzar una app CRM sin construir el backend.

Despliega en minutos — Pega el aviso del Agente de IA y obtén una aplicación en funcionamiento con contactos, empresas, ofertas y pipeline.
Seguro por defecto — ACLs y acceso basado en roles para que los usuarios vean solo sus ofertas y datos asignados.
Next.js-SDK nativo — Objetos tipados, async/await, fijación offline y Live Queries para actualizaciones de pipeline.
REST + GraphQL — Ambas APIs generadas automáticamente; filtra ofertas por etapa, lista actividades por relacionado con.
Cinco clases — _Usuario (incorporado), Empresa, Contacto, Oferta (pipeline), Actividad (tareas/eventos).

¿Qué es la plantilla de backend de la aplicación CRM de Next.js?

La plantilla de backend de la aplicación CRM de Next.js combina el esquema CRM de Back4app con el SDK de Parse tanto para servidor como para cliente. Obtén contactos y negocios en Componentes del Servidor o Server Actions, o utiliza el SDK del cliente para actualizaciones en tiempo real del pipeline. Despliega un CRM de pila completa sin rutas de API personalizadas: Back4app proporciona REST y GraphQL, autenticación y sincronización en tiempo real.

Mejor para:

Equipos de ventasCreadores de CRMPrototipado rápidoRepresentantes de campoLanzamientos de MVPEquipos eligiendo un BaaS para CRM

Descripción general

Next.js puede renderizar datos de CRM en el servidor (Componentes del Servidor, Server Actions) o en el cliente. El esquema de Back4app admite ambos: recupera contactos y ofertas en el código del servidor con el token de sesión en los encabezados, o usa el SDK de Parse en componentes del cliente para actualizaciones en tiempo real del pipeline.

El esquema — _User, Company, Contact, Deal, Activity — está expuesto a través de REST y GraphQL. En Next.js eliges dónde ejecutar consultas (servidor vs cliente) y Back4app aplica ACLs y propiedad para que cada usuario vea solo sus datos.

Características principales del CRM

Backend de CRM Next.js: gestión de contactos y empresas, pipeline de negocios y seguimiento de actividades. Usa Server Actions o el cliente SDK de Parse para pipeline en tiempo real y ACLs.

Gestión de contactos

Almacena y gestiona contactos con nombre, correo electrónico, teléfono, empresa y notas. Ideal para aplicaciones Next.js.

Gestión de empresas

Rastrea empresas con nombre, sitio web, industria y dirección. Enlaces a contactos y ofertas.

Tubería de ofertas

Tubería de ventas con etapas, monto, fecha de cierre esperada y asignación. Construido para backends de Next.js.

Seguimiento de actividades

Registra llamadas, correos electrónicos, reuniones y notas vinculadas a contactos y negocios. Funciona con el SDK de Next.js.

Usuario y permisos

Modelo de usuario integrado y punteros para propiedad y asignación. ACLs listos para usar para Next.js.

¿Por qué construir tu backend CRM de Next.js con Back4app?

Back4app se combina con Next.js para que puedas usar Server Components, Server Actions o la obtención de datos del lado del cliente para CRM sin una API personalizada.

•Servidor y cliente: Obtén contactos y negocios en Server Components o Server Actions; utiliza el SDK de Parse en el cliente para actualizaciones de pipeline en tiempo real.
•Autenticación y sesión: Los tokens de sesión de Parse.User funcionan con tu capa de autenticación de Next.js; pasa el token en los encabezados para solicitudes del lado del servidor.
•Un backend, muchos puntos de entrada: Mismo esquema y APIs ya sea que renderices en el servidor o hidrates en el cliente.

Ideal para aplicaciones de Next.js que construyen CRM o paneles de ventas con App Router o Pages Router.

Beneficios principales

Un backend CRM listo para producción para que puedas enviar más rápido y concentrarte en tu aplicación.

Envía más rápido, sin código de backend

APIs REST y GraphQL y un esquema listo para usar — conecta tu aplicación y listo.

Seguro por defecto

ACLs y permisos a nivel de clase; restringir por assignedTo y createdBy.

Pipeline en Tiempo Real

Live Queries sobre WebSockets para actualizaciones instantáneas de ofertas y actividades.

Autenticación Integrada

Registro de usuario, inicio de sesión y manejo de sesiones listos para usar.

Funciona Sin Conexión

El anclaje local mantiene contactos y ofertas disponibles sin conexión y se sincroniza cuando te reconectas.

Despliega en Minutos

Usa el Agente de IA para crear y desplegar tu aplicación CRM a partir de esta plantilla.

¿Listo para probarlo?

Deja que el agente de IA de Back4app cree el backend de tu aplicación CRM, conecte el frontend Next.js y despliegue — todo desde un solo aviso.

Construir con el agente de IA Prueba el API Playground

Gratis para comenzar — 50 avisos de agente de IA/mes, no se requiere tarjeta de crédito

Pila técnica

Todo lo que impulsa esta plantilla de aplicación CRM de un vistazo.

Frontend

Next.js

Backend

Back4app

Base de datos

MongoDB

Autenticación

Autenticación y Control de Acceso

APIs

REST y GraphQL

Despliegue

Agente de IA / Panel de control

Diagrama ER

Diagrama de entidad-relación para el modelo de datos de la aplicación CRM Next.js.

Diagrama ER

Ver fuente del diagrama

Mermaid

erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Company {
        String objectId PK
        String name
        String website
        String industry
        String address
        String notes
        Pointer createdBy FK
        Date createdAt
        Date updatedAt
    }

    Contact {
        String objectId PK
        String name
        String email
        String phone
        Pointer company FK
        String notes
        Pointer createdBy FK
        Date createdAt
        Date updatedAt
    }

    Deal {
        String objectId PK
        String title
        Number amount
        String stage
        Pointer contact FK
        Pointer company FK
        Date expectedCloseDate
        String notes
        Pointer assignedTo FK
        Date createdAt
        Date updatedAt
    }

    Activity {
        String objectId PK
        String type
        String subject
        String description
        Date dueDate
        Date completedAt
        Pointer relatedTo FK
        Pointer createdBy FK
        Date createdAt
        Date updatedAt
    }

    Company ||--o{ Contact : "has"
    Company ||--o{ Deal : "has"
    Contact ||--o{ Deal : "has"
    _User ||--o{ Deal : "assignedTo"
    _User ||--o{ Activity : "createdBy"
    Contact ||--o{ Activity : "relatedTo"
    Deal ||--o{ Activity : "relatedTo"
    _User ||--o{ Company : "createdBy"
    _User ||--o{ Contact : "createdBy"

Flujo de integración

Secuencia de Auth-to-CRUD: cómo tu aplicación Next.js se comunica con Back4app — iniciar sesión, luego consultar contactos y negocios, actualizar el pipeline.

Diagrama ER

Ver fuente del diagrama

Mermaid

sequenceDiagram
  participant User
  participant App as Next.js App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: Parse.User.logIn(username, password)
  Back4app-->>App: Session token
  App-->>User: Logged in

  User->>App: Load contacts and deals (Server or Client)
  App->>Back4app: new Parse.Query('Deal').find() or Parse.Query('Contact').find()
  Back4app-->>App: List of Deal / Contact
  App-->>User: Show pipeline

  User->>App: Create deal or contact
  App->>Back4app: deal.save() or contact.save()
  Back4app-->>App: Deal (objectId)
  App-->>User: Updated list

Diccionario de datos

Referencia completa de campos para cada clase en el esquema.

Campo	Tipo	Descripción	Requerido
objectId	String	Auto-generated unique identifier	automático
name	String	Full name of the contact
email	String	Email address	—
phone	String	Phone number	—
company	Pointer<Company>	Company this contact belongs to	—
notes	String	Free-form notes	—
createdBy	Pointer<_User>	User who created this contact	—
createdAt	Date	Auto-generated creation timestamp	automático
updatedAt	Date	Auto-generated last-update timestamp	automático

9 campos en Contact

Seguridad y permisos

Cómo la propiedad, ACLs y permisos a nivel de clase protegen los datos en este esquema de CRM.

ACLs a Nivel de Fila

Usa ACLs y punteros (assignedTo, createdBy) para que los usuarios solo vean y editen sus tratos asignados y datos relacionados.

Permisos a Nivel de Clase

Los CLPs restringen qué roles o usuarios pueden crear, leer, actualizar o eliminar objetos a nivel de clase.

Propiedad Basada en Punteros

Deal.assignedTo y Activity.createdBy se vinculan a _User; Cloud Code puede hacer cumplir la visibilidad y las ediciones por rol.

Esquema (JSON)

Definición de esquema JSON en bruto — copia y usa en tu aplicación Back4app o importa a través de la API.

JSON

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

{
  "classes": [
    {
      "className": "Contact",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "name": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": false
        },
        "phone": {
          "type": "String",
          "required": false
        },
        "company": {
          "type": "Pointer",
          "targetClass": "Company",
          "required": false
        },
        "notes": {
          "type": "String",
          "required": false
        },
        "createdBy": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Company",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "name": {
          "type": "String",
          "required": true
        },
        "website": {
          "type": "String",
          "required": false
        },
        "industry": {
          "type": "String",
          "required": false
        },
        "address": {
          "type": "String",
          "required": false
        },
        "notes": {
          "type": "String",
          "required": false
        },
        "createdBy": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Deal",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "amount": {
          "type": "Number",
          "required": false
        },
        "stage": {
          "type": "String",
          "required": false
        },
        "contact": {
          "type": "Pointer",
          "targetClass": "Contact",
          "required": false
        },
        "company": {
          "type": "Pointer",
          "targetClass": "Company",
          "required": false
        },
        "expectedCloseDate": {
          "type": "Date",
          "required": false
        },
        "notes": {
          "type": "String",
          "required": false
        },
        "assignedTo": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Activity",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "type": {
          "type": "String",
          "required": false
        },
        "subject": {
          "type": "String",
          "required": false
        },
        "description": {
          "type": "String",
          "required": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "completedAt": {
          "type": "Date",
          "required": false
        },
        "relatedTo": {
          "type": "Pointer",
          "required": false
        },
        "createdBy": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

Construir con el Agente de IA

Utiliza el Agente de IA de Back4app para construir una aplicación CRM real a partir de esta plantilla: creará el frontend, el backend (este esquema, autenticación y APIs) y lo desplegará — sin configuración manual. El aviso a continuación describe esta pila CRM para que el Agente pueda generar una aplicación lista para producción de una sola vez.

Agente de IA Back4app

Listo para construir

Crea una aplicación CRM en Back4app con este esquema y comportamiento exactos.

Esquema:
1. _Usuario (usar Back4app incorporado): nombre de usuario (String, requerido), correo electrónico (String, requerido), contraseña (String, requerido); objectId, createdAt, updatedAt (sistema).
2. Empresa: nombre (String, requerido), sitio web (String), industria (String), dirección (String), notas (String), creadoPor (Puntero a _Usuario); objectId, createdAt, updatedAt (sistema).
3. Contacto: nombre (String, requerido), correo electrónico (String), teléfono (String), empresa (Puntero a Empresa), notas (String), creadoPor (Puntero a _Usuario); objectId, createdAt, updatedAt (sistema).
4. Negocio: título (String, requerido), monto (Número), etapa (String; por ejemplo, cliente potencial, calificado, propuesta, negociación, ganado, perdido), contacto (Puntero a Contacto), empresa (Puntero a Empresa), fechaEsperadaCierre (Fecha), notas (String), asignadoA (Puntero a _Usuario); objectId, createdAt, updatedAt (sistema).
5. Actividad: tipo (String; por ejemplo, llamada, correo electrónico, reunión, nota), asunto (String), descripción (String), fechaVencimiento (Fecha), completadoEn (Fecha), relacionadoCon (Puntero a Contacto o Negocio), creadoPor (Puntero a _Usuario); objectId, createdAt, updatedAt (sistema).

Seguridad:
- Establecer ACLs para que solo los usuarios autenticados puedan acceder a los datos; usar reglas basadas en roles o basadas en propietarios donde sea apropiado (por ejemplo, asignadoA, creadoPor).
- Usar Permisos a Nivel de Clase para que solo los usuarios autenticados puedan crear/leer/actualizar/eliminar estas clases.

Autenticación:
- Registro (nombre de usuario, correo electrónico, contraseña) e inicio de sesión; soporte para cerrar sesión/sesión.

Comportamiento:
- CRUD completo para Empresa, Contacto, Negocio y Actividad.
- Listar negocios con filtro por etapa y ordenar por fechaEsperadaCierre o updatedAt (vista de pipeline).
- Listar actividades por relacionadoCon (Contacto o Negocio).
- Opcional: Live Queries en tiempo real para Negocio y Actividad para actualizaciones de panel/pipeline.
- Opcional: fijación fuera de línea para móvil (Contactos, Negocios, Actividades).

Entregar:
- Crear la aplicación Back4app con el esquema anterior, ACLs y cualquier Código en la Nube necesario.
- Generar el frontend y conectarlo a este backend; desplegar para que la aplicación sea ejecutable de extremo a extremo.

Presiona el botón a continuación para abrir el Agente con el aviso de esta plantilla prellenado.

Desplegar en minutos50 mensajes gratuitos / mesNo se requiere tarjeta de crédito

API Playground

Prueba los endpoints REST y GraphQL para el esquema CRM. Respuestas de los datos de ejemplo anteriores — no se necesita cuenta de Back4app.

Cargando espacio de trabajo…

Utiliza el mismo esquema CRM (Contacto, Empresa, Negocio, Actividad) que esta plantilla.

Integración paso a paso Next.js

Conéctate a tu backend de Back4app desde una app Next.js utilizando el SDK Back4app Next.js.

Paso 1: Instalar el SDK Back4app Next.js
Agrega el SDK Back4app para tu stack (por ejemplo, npm, pubspec o gestor de paquetes).
Bash
1
```
npm install parse
```

Paso 2: Inicializa Back4app en tu app

Inicializa el SDK de Back4app al iniciar la aplicación con tu ID de aplicación y URL del servidor.

JavaScript

// app/providers/parse.ts or layout.tsx
import Parse from 'parse';

Parse.initialize(
  process.env.NEXT_PUBLIC_PARSE_APP_ID!,
  process.env.NEXT_PUBLIC_PARSE_JS_KEY!,
  { serverURL: 'https://parseapi.back4app.com' }
);
Parse.serverURL = 'https://parseapi.back4app.com';

Paso 3: Consultar contactos y ofertas

Utiliza el SDK para obtener objetos de Contacto y Oferta; filtra las ofertas por etapa para el pipeline.

JavaScript

// Server: app/actions/crm.ts — or client with Parse SDK
async function getDeals(stage = 'qualified') {
  const query = new Parse.Query('Deal');
  query.equalTo('stage', stage);
  query.ascending('expectedCloseDate');
  const results = await query.find();
  return results;
}

async function getContacts() {
  const query = new Parse.Query('Contact');
  return await query.find();
}

Paso 4: Crear un contacto u oferta

Crea un nuevo Contacto u Oferta con los campos y punteros requeridos (empresa, contacto, asignadoA), luego guarda.

JavaScript

async function createDeal(title: string, stage = 'lead', amount?: number) {
  const Deal = Parse.Object.extend('Deal');
  const deal = new Deal();
  deal.set('title', title);
  deal.set('stage', stage);
  if (amount != null) deal.set('amount', amount);
  await deal.save();
  return deal;
}

Paso 5: Actualizar la etapa de la oferta y actividades

Actualiza Deal.stage al mover en el pipeline; crea y lista Actividad por relacionadoCon.

JavaScript

// Update deal stage
async function updateDealStage(objectId: string, stage: string) {
  const query = new Parse.Query('Deal');
  const deal = await query.get(objectId);
  deal.set('stage', stage);
  await deal.save();
}

// Delete
async function deleteDeal(objectId: string) {
  const query = new Parse.Query('Deal');
  const deal = await query.get(objectId);
  await deal.destroy();
}

Integración de Gestión de Estado

Integra el SDK de Back4app con la capa de estado de tu aplicación (por ejemplo, contexto, tienda o servicios) para el estado de pipeline y contacto.

Modelo de Datos Completo

Copia un modelo CRM completo para la serialización segura por tipo (por ejemplo, clase, interfaz o definición de tipo).

JavaScript

// TypeScript interfaces for Deal and Contact (matches Back4app schema)
interface Deal {
  objectId?: string;
  title: string;
  amount?: number;
  stage?: string;
  expectedCloseDate?: string;
  contact?: { __type: string; className: string; objectId: string };
  company?: { __type: string; className: string; objectId: string };
  assignedTo?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

interface Contact {
  objectId?: string;
  name: string;
  email?: string;
  phone?: string;
  company?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

function toDeal(obj: Parse.Object): Deal {
  return {
    objectId: obj.id,
    title: obj.get('title'),
    amount: obj.get('amount'),
    stage: obj.get('stage'),
    expectedCloseDate: obj.get('expectedCloseDate')?.toISOString?.() ?? undefined,
    contact: obj.get('contact'),
    company: obj.get('company'),
    assignedTo: obj.get('assignedTo'),
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

Preguntas Frecuentes

Preguntas comunes sobre la plantilla del backend de la aplicación CRM.

¿Qué es Back4app?

¿Por qué usar Back4app para una aplicación CRM de Next.js?

¿Cómo consulto negocios por etapa en Next.js?

¿Puedo usar Server Actions con Back4app?

Confiado por desarrolladores de todo el mundo

Únete a la comunidad que está construyendo el futuro de las aplicaciones

¿Listo para construir tu aplicación CRM?

Comienza tu proyecto Next.js en minutos. No se requiere tarjeta de crédito.

Construye con Agente AI

Plantilla de Backend para la App CRMNext.js — Guía de Esquema, API y AI

Puntos Clave

¿Qué es la plantilla de backend de la aplicación CRM de Next.js?

Descripción general

Características principales del CRM

Gestión de contactos

Gestión de empresas

Tubería de ofertas

Seguimiento de actividades

Usuario y permisos

¿Por qué construir tu backend CRM de Next.js con Back4app?

Beneficios principales

Envía más rápido, sin código de backend

Seguro por defecto

Pipeline en Tiempo Real

Autenticación Integrada

Funciona Sin Conexión

Despliega en Minutos

¿Listo para probarlo?

Pila técnica

Diagrama ER

Flujo de integración

Diccionario de datos

Seguridad y permisos

ACLs a Nivel de Fila

Permisos a Nivel de Clase

Propiedad Basada en Punteros

Esquema (JSON)

Construir con el Agente de IA

API Playground

Integración paso a paso Next.js

Paso 1: Instalar el SDK Back4app Next.js

Paso 2: Inicializa Back4app en tu app

Paso 3: Consultar contactos y ofertas

Paso 4: Crear un contacto u oferta

Paso 5: Actualizar la etapa de la oferta y actividades

Integración de Gestión de Estado

Modelo de Datos Completo

Preguntas Frecuentes

Confiado por desarrolladores de todo el mundo

¿Listo para construir tu aplicación CRM?

Plantilla de Backend para la App CRM
Next.js — Guía de Esquema, API y AI