Back4app é o backend por trás dos aplicativos de CRM. Para Next.js você obtém o SDK do Parse em Componentes de Servidor ou Server Actions para contatos e negócios, além de REST e GraphQL—sem servidor para escrever ou hospedar.

Modelo Next.js

Modelo de Backend para App de CRM
Next.js — Guia de Schema, API e IA

Q: Por que usar Back4app para um aplicativo de CRM do Next.js?

Back4app funciona com o CRM do Next.js: busque contatos e negócios em Componentes de Servidor ou Server Actions, ou use o SDK do Parse no cliente para atualizações de pipeline em tempo real.

Q: Como faço para consultar negócios por estágio no Next.js?

No Server Actions ou no código do cliente, use o SDK do Parse com o novo Parse.Query('Deal').equalTo('stage', stage).orderBy('expectedCloseDate').find().

Q: Posso usar Server Actions com Back4app?

Sim. Chame o Parse REST API ou SDK de Server Actions; passe o token da sessão nos cabeçalhos para requisições autenticadas.

Um schema de backend de Next.js CRM pronto para produção e Starter Kit na Back4app: Contato, Empresa, Negócio, Atividade, estágios do pipeline, diagrama ER, dicionário de dados, schema JSON, playground de API e um prompt de Agente de IA com um clique para implantar em minutos.

Construir com Agente de IA

Principais Conclusões

Nesta página você obtém um schema de CRM pronto para produção, um prompt de IA com um clique e código Next.js passo a passo — para que você possa lançar um app de CRM sem construir o backend.

Implante em minutos — Cole o prompt do Agente de IA e obtenha um aplicativo em funcionamento com contatos, empresas, negócios e pipeline.
Seguro por padrão — ACLs e acesso baseado em funções para que os usuários vejam apenas seus negócios e dados atribuídos.
Next.js-nativo SDK — Objetos tipados, async/await, fixação offline e Live Queries para atualizações de pipeline.
REST + GraphQL — Ambas as APIs geradas automaticamente; filtre negócios por estágio, liste atividades por relacionado a.
Cinco classes — _Usuário (embutido), Empresa, Contato, Negócio (pipeline), Atividade (tarefas/eventos).

O que é o modelo de backend do aplicativo CRM Next.js?

O modelo de backend do aplicativo CRM Next.js combina o esquema CRM do Back4app com o SDK do Parse tanto para servidor quanto para cliente. Busque contatos e negócios em Componentes de Servidor ou Server Actions, ou use o SDK do cliente para atualizações em tempo real do pipeline. Implemente um CRM full-stack sem rotas de API personalizadas — Back4app fornece REST e GraphQL, autenticação e sincronização em tempo real.

Melhor para:

Equipes de vendasConstrutores de CRMPrototipagem rápidaRepresentantes de campoLançamentos de MVPEquipes escolhendo um BaaS para CRM

Visão Geral

Next.js pode renderizar dados de CRM no servidor (Componentes do Servidor, Server Actions) ou no cliente. O esquema de Back4app suporta ambos: busque contatos e negócios no código do servidor com o token de sessão nos cabeçalhos, ou use o SDK de Parse em componentes do cliente para atualizações em tempo real do pipeline.

O esquema — _User, Company, Contact, Deal, Activity — é exposto via REST e GraphQL. Em Next.js você escolhe onde executar consultas (servidor vs cliente) e Back4app impõe ACLs e propriedade para que cada usuário veja apenas seus dados.

Recursos principais do CRM

Next.js backend CRM: gerenciamento de contatos e empresas, pipeline de negócios e rastreamento de atividades. Use Server Actions ou o SDK cliente Parse para pipeline em tempo real e ACLs.

Gerenciamento de contatos

Armazene e gerencie contatos com nome, e-mail, telefone, empresa e notas. Ideal para aplicativos Next.js.

Gestão de empresas

Rastreie empresas com nome, site, setor e endereço. Links para contatos e negócios.

Pipeline de negócios

Pipeline de vendas com etapas, valor, data de fechamento esperada e atribuição. Construído para backends Next.js.

Rastreamento de atividades

Registre chamadas, e-mails, reuniões e notas vinculadas a contatos e negócios. Funciona com o SDK Next.js.

Usuário e permissões

Modelo de usuário embutido e referências para propriedade e atribuição. ACLs prontas para uso para Next.js.

Por que construir seu backend CRM Next.js com Back4app?

Back4app se combina com Next.js para que você possa usar Componentes de Servidor, Server Actions ou busca do lado do cliente para CRM sem uma API personalizada.

•Servidor e cliente: Busque contatos e negócios em Componentes de Servidor ou Server Actions; use o SDK Parse no cliente para atualizações em tempo real do pipeline.
•Autenticação e sessão: Os tokens de sessão de usuário Parse funcionam com sua camada de autenticação Next.js; passe o token nos cabeçalhos para solicitações do lado do servidor.
•Um backend, muitos pontos de entrada: Mesmo esquema e APIs, seja você renderize no servidor ou hidrate no cliente.

Ideal para aplicativos Next.js que constroem CRM ou painéis de vendas com App Router ou Pages Router.

Benefícios Principais

Um backend CRM pronto para produção para que você possa enviar mais rápido e focar no seu aplicativo.

Envie Mais Rápido, Sem Código de Backend

APIs REST & GraphQL e um esquema pronto para uso — conecte seu aplicativo e vá.

Seguro por Padrão

ACLs e permissões em nível de classe; restrição por assignedTo e createdBy.

Pipeline em Tempo Real

Live Queries sobre WebSockets para atualizações instantâneas de negócios e atividades.

Autenticação Integrada

Cadastro de usuário, login e gerenciamento de sessão prontos para uso.

Funciona Offline

O pinning local mantém contatos e negócios disponíveis offline e sincroniza quando você se reconecta.

Implante em Minutos

Use o Agente de IA para criar e implantar seu aplicativo CRM a partir deste modelo.

Pronto para experimentar?

Deixe o agente de IA da Back4app criar o backend do seu aplicativo CRM, conectar o frontend Next.js e implantar — tudo a partir de um único comando.

Construir com Agente de IA Experimente o API Playground

Grátis para começar — 50 comandos de Agente de IA/mês, sem necessidade de cartão de crédito

Pilha Técnica

Tudo que alimenta este modelo de aplicativo CRM em um relance.

Frontend

Next.js

Backend

Back4app

Banco de Dados

MongoDB

Autenticação

Autenticação e Controle de Acesso

APIs

REST e GraphQL

Implantação

Agente de IA / Painel

Diagrama ER

Diagrama de Entidade-Relacionamento para o modelo de dados do aplicativo Next.js CRM.

Diagrama ER

Ver fonte do 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"

Fluxo de Integração

Sequência Auth-to-CRUD: como seu aplicativo Next.js se comunica com Back4app — login, depois consulta contatos e negócios, atualiza o pipeline.

Diagrama ER

Ver fonte do 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

Dicionário de Dados

Referência completa de campos para cada classe no esquema.

Campo	Tipo	Descrição	Obrigatório
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 em Contact

Segurança e Permissões

Como a propriedade, ACLs e permissões em nível de classe protegem os dados neste esquema de CRM.

ACLs em Nível de Linha

Use ACLs e ponteiros (assignedTo, createdBy) para que os usuários vejam e editem apenas seus negócios atribuídos e dados relacionados.

Permissões em Nível de Classe

CLPs restringem quais funções ou usuários podem criar, ler, atualizar ou excluir objetos em nível de classe.

Propriedade Baseada em Ponteiro

Deal.assignedTo e Activity.createdBy vinculam-se a _User; o Cloud Code pode impor visibilidade e edições por função.

Esquema (JSON)

Definição de esquema JSON bruto — copie e use em seu aplicativo Back4app ou importe via 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
        }
      }
    }
  ]
}

Construa com o Agente de IA

Use o Agente de IA Back4app para construir um aplicativo CRM real a partir deste modelo: ele criará o frontend, o backend (este esquema, autenticação e APIs) e fará a implantação — sem configuração manual. O prompt abaixo descreve esta pilha de CRM para que o Agente possa gerar um aplicativo pronto para produção de uma só vez.

Agente de IA Back4app

Pronto para construir

Crie um aplicativo CRM no Back4app com este esquema e comportamento exatos.

Esquema:
1. _Usuário (use Back4app embutido): nome de usuário (String, obrigatório), email (String, obrigatório), senha (String, obrigatório); objectId, createdAt, updatedAt (sistema).
2. Empresa: nome (String, obrigatório), site (String), setor (String), endereço (String), notas (String), criadoPor (Ponteiro para _Usuário); objectId, createdAt, updatedAt (sistema).
3. Contato: nome (String, obrigatório), email (String), telefone (String), empresa (Ponteiro para Empresa), notas (String), criadoPor (Ponteiro para _Usuário); objectId, createdAt, updatedAt (sistema).
4. Negócio: título (String, obrigatório), valor (Número), estágio (String; por exemplo, lead, qualificado, proposta, negociação, ganho, perdido), contato (Ponteiro para Contato), empresa (Ponteiro para Empresa), dataFechamentoEsperada (Data), notas (String), atribuídoA (Ponteiro para _Usuário); objectId, createdAt, updatedAt (sistema).
5. Atividade: tipo (String; por exemplo, chamada, email, reunião, nota), assunto (String), descrição (String), dataVencimento (Data), concluídoEm (Data), relacionadoA (Ponteiro para Contato ou Negócio), criadoPor (Ponteiro para _Usuário); objectId, createdAt, updatedAt (sistema).

Segurança:
- Defina ACLs para que apenas usuários autenticados possam acessar os dados; use regras baseadas em função ou baseadas em proprietário onde apropriado (por exemplo, atribuídoA, criadoPor).
- Use Permissões em Nível de Classe para que apenas usuários autenticados possam criar/ler/atualizar/excluir essas classes.

Autenticação:
- Cadastro (nome de usuário, email, senha) e login; suporte para logout/sessão.

Comportamento:
- CRUD completo para Empresa, Contato, Negócio e Atividade.
- Liste negócios com filtro por estágio e ordene por dataFechamentoEsperada ou updatedAt (visualização de pipeline).
- Liste atividades por relacionadoA (Contato ou Negócio).
- Opcional: Live Queries em tempo real para Negócio e Atividade para atualizações de painel/pipeline.
- Opcional: fixação offline para mobile (Contatos, Negócios, Atividades).

Entregar:
- Crie o aplicativo Back4app com o esquema acima, ACLs e qualquer Cloud Code necessário.
- Gere o frontend e conecte-o a este backend; implante para que o aplicativo seja executável de ponta a ponta.

Pressione o botão abaixo para abrir o Agente com o prompt deste modelo pré-preenchido.

Implantar em minutos50 prompts gratuitos / mêsNenhum cartão de crédito necessário

API Playground

Experimente os endpoints REST e GraphQL para o esquema CRM. Respostas dos dados de exemplo acima — nenhuma conta Back4app necessária.

Carregando playground…

Usa o mesmo esquema CRM (Contato, Empresa, Negócio, Atividade) que este modelo.

Integração Next.js Passo a Passo

Conecte-se ao seu backend Back4app a partir de um app Next.js usando o SDK Back4app Next.js.

Passo 1: Instale o SDK Back4app Next.js
Adicione o SDK Back4app para sua stack (por exemplo, npm, pubspec ou gerenciador de pacotes).
Bash
1
```
npm install parse
```

Passo 2: Inicialize o Back4app em seu app

Inicialize o SDK do Back4app na inicialização do aplicativo com seu ID de aplicativo e URL do 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';

Etapa 3: Consultar contatos e negócios

Use o SDK para buscar objetos de Contato e Negócio; filtre negócios por estágio para o 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();
}

Etapa 4: Criar um contato ou negócio

Crie um novo Contato ou Negócio com os campos e apontadores necessários (empresa, contato, atribuído a), e então salve.

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;
}

Etapa 5: Atualizar estágio do negócio e atividades

Atualize Deal.stage ao mover no pipeline; crie e liste Atividades por relacionado a.

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();
}

Integração de Gerenciamento de Estado

Integre o SDK Back4app com a camada de estado do seu aplicativo (por exemplo, contexto, loja ou serviços) para estado de pipeline e contato.

Modelo de Dados Completo

Copie um modelo completo de CRM para serialização segura por tipo (por exemplo, classe, interface ou definição 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,
  };
}

Perguntas Frequentes

Perguntas comuns sobre o modelo de backend do aplicativo CRM.

O que é Back4app?

Por que usar Back4app para um aplicativo de CRM do Next.js?

Como faço para consultar negócios por estágio no Next.js?

Posso usar Server Actions com Back4app?

Confiado por desenvolvedores em todo o mundo

Junte-se à comunidade que está construindo o futuro dos aplicativos

Pronto para Construir Seu App de CRM?

Comece seu projeto Next.js em minutos. Nenhum cartão de crédito necessário.

Construa com Agente de IA

Modelo de Backend para App de CRMNext.js — Guia de Schema, API e IA

Principais Conclusões

O que é o modelo de backend do aplicativo CRM Next.js?

Visão Geral

Recursos principais do CRM

Gerenciamento de contatos

Gestão de empresas

Pipeline de negócios

Rastreamento de atividades

Usuário e permissões

Por que construir seu backend CRM Next.js com Back4app?

Benefícios Principais

Envie Mais Rápido, Sem Código de Backend

Seguro por Padrão

Pipeline em Tempo Real

Autenticação Integrada

Funciona Offline

Implante em Minutos

Pronto para experimentar?

Pilha Técnica

Diagrama ER

Fluxo de Integração

Dicionário de Dados

Segurança e Permissões

ACLs em Nível de Linha

Permissões em Nível de Classe

Propriedade Baseada em Ponteiro

Esquema (JSON)

Construa com o Agente de IA

API Playground

Integração Next.js Passo a Passo

Passo 1: Instale o SDK Back4app Next.js

Passo 2: Inicialize o Back4app em seu app

Etapa 3: Consultar contatos e negócios

Etapa 4: Criar um contato ou negócio

Etapa 5: Atualizar estágio do negócio e atividades

Integração de Gerenciamento de Estado

Modelo de Dados Completo

Perguntas Frequentes

Confiado por desenvolvedores em todo o mundo

Pronto para Construir Seu App de CRM?

Modelo de Backend para App de CRM
Next.js — Guia de Schema, API e IA