Next.js Шаблон

Шаблон бэкенда CRM приложения
Next.js — Схема, API и AI руководство

Q: Что такое Back4app?

Back4app — это бэкенд для CRM-приложений. Для Next.js вы получаете Parse SDK в Server Components или Server Actions для контактов и сделок, плюс REST и GraphQL — без сервера для написания или хостинга.

Q: Почему использовать Back4app для CRM-приложения Next.js?

Back4app работает с Next.js CRM: получайте контакты и сделки в Server Components или Server Actions, или используйте Parse SDK на клиенте для обновлений пайплайна в реальном времени.

Q: Как мне запросить сделки по этапу в Next.js?

В Server Actions или клиентском коде используйте SDK Parse с новым Parse.Query('Deal').equalTo('stage', stage).orderBy('expectedCloseDate').find().

Q: Могу ли я использовать Server Actions с Back4app?

Да. Вызовите Parse REST API или SDK из Server Actions; передайте токен сессии в заголовках для аутентифицированных запросов.

Готовая к производству Next.js CRM схема бэкенда и Стартовый комплект на Back4app: Контакт, Компания, Сделка, Активность, этапы воронки, ER-диаграмма, словарь данных, JSON-схема, API-площадка и однонажатийный AI агент для развертывания за минуты.

Создано с помощью AI-агента

Ключевые выводы

На этой странице вы получите готовую к производству схему CRM, однонажатийный AI-подсказку и пошаговый код Next.js — так вы сможете выпустить приложение CRM без создания бэкенда.

Разверните за считанные минуты — Вставьте подсказку AI Agent и получите работающее приложение с контактами, компаниями, сделками и конвейером.
Безопасно по умолчанию — ACL и доступ на основе ролей, чтобы пользователи видели только свои назначенные сделки и данные.
Next.js-родной SDK — Типизированные объекты, async/await, оффлайн-фиксация и Live Queries для обновлений конвейера.
REST + GraphQL — Обе API сгенерированы автоматически; фильтруйте сделки по этапу, перечисляйте активности по relatedTo.
Пять классов — _User (встроенный), Компания, Контакт, Сделка (конвейер), Активность (задачи/события).

Что такое шаблон бэкенда CRM приложения Next.js?

Шаблон бэкенда CRM приложения Next.js сочетает схему CRM Back4app с SDK Parse как для сервера, так и для клиента. Получайте контакты и сделки в Server Components или Server Actions, или используйте клиентский SDK для обновлений в реальном времени в воронке. Разверните полнофункциональное CRM приложение без пользовательских маршрутов API — Back4app предоставляет REST и GraphQL, аутентификацию и синхронизацию в реальном времени.

Лучше всего для:

Команды продажСоздатели CRMБыстрое прототипированиеПолевые представителиЗапуски MVPКоманды выбирают BaaS для CRM

Обзор

Next.js может отображать данные CRM на сервере (Серверные компоненты, Server Actions) или на клиенте. Схема Back4app поддерживает оба варианта: получайте контакты и сделки в серверном коде с токеном сессии в заголовках или используйте SDK Parse в клиентских компонентах для обновлений процесса в реальном времени.

Схема — _User, Company, Contact, Deal, Activity — доступна через REST и GraphQL. В Next.js вы выбираете, где выполнять запросы (сервер против клиента), и Back4app обеспечивает контроль доступа и владения, чтобы каждый пользователь видел только свои данные.

Основные функции CRM

Next.js CRM бэкенд: управление контактами и компаниями, воронка сделок и отслеживание активности. Используйте Server Actions или клиентский SDK Parse для обновлений воронки и ACL в реальном времени.

Управление контактами

Храните и управляйте контактами с именем, электронной почтой, телефоном, компанией и заметками. Идеально подходит для приложений Next.js.

Управление компаниями

Отслеживайте компании по имени, веб-сайту, отрасли и адресу. Связано с контактами и сделками.

Конвейер сделок

Конвейер продаж с этапами, суммой, ожидаемой датой закрытия и назначением. Создан для бэкендов Next.js.

Отслеживание активности

Записывайте звонки, электронные письма, встречи и заметки, связанные с контактами и сделками. Работает с SDK Next.js.

Пользователь и разрешения

Встроенная модель пользователя и указатели для владения и назначения. ACL из коробки для Next.js.

Почему стоит создать ваш CRM бекенд Next.js с Back4app?

Back4app работает с Next.js, чтобы вы могли использовать серверные компоненты, Server Actions или клиентский запрос для CRM без пользовательского API.

•Сервер и клиент: Получайте контакты и сделки в серверных компонентах или Server Actions; используйте SDK Parse на клиенте для обновлений в реальном времени.
•Аутентификация и сессия: Токены сессий Parse.User работают с вашим уровнем аутентификации Next.js; передавайте токен в заголовках для серверных запросов.
•Один бекенд, много точек входа: Одна и та же схема и API, независимо от того, рендерите ли вы на сервере или гидратируете на клиенте.

Идеально подходит для приложений Next.js, создающих CRM или панели продаж с App Router или Pages Router.

Основные преимущества

Готовый к производству CRM-бэкенд, чтобы вы могли быстрее разрабатывать и сосредоточиться на своем приложении.

Разрабатывайте быстрее, без кода бэкенда

REST и API GraphQL и готовая схема — подключите свое приложение и вперед.

Безопасно по умолчанию

ACL и разрешения на уровне класса; ограничить по assignedTo и createdBy.

Поток в реальном времени

Live Queries через WebSockets для мгновенных обновлений сделок и активности.

Встроенная аутентификация

Регистрация пользователей, вход в систему и управление сессиями из коробки.

Работает в оффлайне

Локальная привязка сохраняет контакты и сделки доступными в оффлайне и синхронизирует их при повторном подключении.

Развертывание за минуты

Используйте AI Agent для создания и развертывания вашего CRM-приложения из этого шаблона.

Готовы попробовать?

Позвольте AI Agent от Back4app создать бэкенд вашего CRM-приложения, подключить фронтенд Next.js и развернуть — все из одного запроса.

Создавайте с AI Agent Попробуйте API Playground

Бесплатно для начала — 50 запросов AI Agent в месяц, без необходимости в кредитной карте

Технический стек

Все, что поддерживает этот шаблон CRM-приложения, на одном взгляде.

Фронтенд

Next.js

Бэкенд

Back4app

База данных

MongoDB

Аутентификация

Аутентификация и контроль доступа

API

REST и GraphQL

Развертывание

AI-агент / Панель управления

ER диаграмма

Диаграмма «Сущность-связь» для модели данных CRM приложения Next.js.

ER Диаграмма

Просмотреть источник диаграммы

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"

Поток интеграции

Последовательность Auth-to-CRUD: как ваше Next.js приложение взаимодействует с Back4app — вход в систему, затем запрос контактов и сделок, обновление воронки.

ER Диаграмма

Просмотреть источник диаграммы

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

Словарь данных

Полная справка по полям для каждого класса в схеме.

Поле	Тип	Описание	Обязательно
objectId	String	Auto-generated unique identifier	авто
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	авто
updatedAt	Date	Auto-generated last-update timestamp	авто

9 поля в Contact

Безопасность и разрешения

Как владение, ACL и разрешения на уровне классов защищают данные в этой схеме CRM.

ACL на уровне строк

Используйте ACL и указатели (assignedTo, createdBy), чтобы пользователи видели и редактировали только свои назначенные сделки и связанные данные.

Разрешения на уровне классов

CLP ограничивают, какие роли или пользователи могут создавать, читать, обновлять или удалять объекты на уровне класса.

Владение на основе указателей

Deal.assignedTo и Activity.createdBy ссылаются на _User; Cloud Code может обеспечивать видимость и редактирование по ролям.

Схема (JSON)

Сырая определение схемы JSON — скопируйте и используйте в вашем Back4app приложении или импортируйте через 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
        }
      }
    }
  ]
}

Создайте с помощью AI Agent

Используйте Back4app AI Agent, чтобы создать реальное CRM приложение из этого шаблона: он создаст фронтенд, бэкенд (эту схему, аутентификацию и API) и развернет его — без ручной настройки. Подсказка ниже описывает этот стек CRM, чтобы Агент мог сгенерировать готовое к производству приложение за один раз.

Back4app AI Agent

Готовы к созданию

Создайте приложение CRM на Back4app с этой точной схемой и поведением.

Схема:
1. _Пользователь (используйте встроенный Back4app): имя пользователя (Строка, обязательно), электронная почта (Строка, обязательно), пароль (Строка, обязательно); objectId, createdAt, updatedAt (система).
2. Компания: название (Строка, обязательно), веб-сайт (Строка), отрасль (Строка), адрес (Строка), заметки (Строка), создано (Указатель на _Пользователь); objectId, createdAt, updatedAt (система).
3. Контакт: имя (Строка, обязательно), электронная почта (Строка), телефон (Строка), компания (Указатель на Компанию), заметки (Строка), создано (Указатель на _Пользователь); objectId, createdAt, updatedAt (система).
4. Сделка: название (Строка, обязательно), сумма (Число), стадия (Строка; например, лид, квалифицированный, предложение, переговоры, выиграно, проиграно), контакт (Указатель на Контакт), компания (Указатель на Компанию), ожидаемая дата закрытия (Дата), заметки (Строка), назначено (Указатель на _Пользователь); objectId, createdAt, updatedAt (система).
5. Активность: тип (Строка; например, звонок, электронная почта, встреча, заметка), тема (Строка), описание (Строка), срок (Дата), завершено (Дата), связано с (Указатель на Контакт или Сделку), создано (Указатель на _Пользователь); objectId, createdAt, updatedAt (система).

Безопасность:
- Установите ACL, чтобы только аутентифицированные пользователи могли получать доступ к данным; используйте правила на основе ролей или владельца, где это уместно (например, назначено, создано).
- Используйте разрешения на уровне класса, чтобы только аутентифицированные пользователи могли создавать/читать/обновлять/удалять эти классы.

Аутентификация:
- Регистрация (имя пользователя, электронная почта, пароль) и вход; поддержка выхода/сессии.

Поведение:
- Полный CRUD для Компании, Контакта, Сделки и Активности.
- Список сделок с фильтром по стадии и сортировкой по ожидаемой дате закрытия или updatedAt (вид воронки).
- Список активностей по связанным с (Контакт или Сделка).
- Опционально: обновления в реальном времени Live Queries для Сделки и Активности для обновлений панели управления/воронки.
- Опционально: оффлайн-фиксация для мобильных устройств (Контакты, Сделки, Активности).

Доставка:
- Создайте приложение Back4app с вышеуказанной схемой, ACL и любым необходимым облачным кодом.
- Сгенерируйте фронтенд и подключите его к этому бэкенду; разверните, чтобы приложение работало от начала до конца.

Нажмите кнопку ниже, чтобы открыть Агента с предзаполненной подсказкой этого шаблона.

Развернуть за минуты50 бесплатных запросов / месяцКредитная карта не требуется

API Playground

Попробуйте REST и GraphQL конечные точки для схемы CRM. Ответы из приведенных выше примерных данных — учетная запись Back4app не требуется.

Загрузка песочницы…

Использует ту же схему CRM (Контакт, Компания, Сделка, Активность), что и этот шаблон.

Пошаговая интеграция Next.js

Подключитесь к вашему Back4app бэкенду из приложения Next.js с использованием SDK Back4app Next.js.

Шаг 1: Установите SDK Back4app Next.js
Добавьте SDK Back4app для вашего стека (например, npm, pubspec или менеджер пакетов).
Bash
1
```
npm install parse
```
Шаг 2: Инициализируйте Back4app в вашем приложении
Инициализируйте SDK Back4app при запуске приложения с вашим идентификатором приложения и URL-адресом сервера.
JavaScript
1
2
3
4
5
6
7
8
9
```
// 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';
```

Шаг 3: Запросите контакты и сделки

Используйте SDK для получения объектов Контакта и Сделки; фильтруйте сделки по этапу для воронки.

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

Шаг 4: Создайте контакт или сделку
Создайте новый Контакт или Сделку с обязательными полями и указателями (компания, контакт, назначено), затем сохраните.
JavaScript
1
2
3
4
5
6
7
8
9
```
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;
}
```

Шаг 5: Обновите стадию сделки и действия

Обновите Deal.stage при перемещении в воронке; создайте и перечислите Activity по relatedTo.

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

Интеграция управления состоянием

Интегрируйте SDK Back4app с уровнем состояния вашего приложения (например, контекст, хранилище или сервисы) для состояния потока и контактов.

Полная модель данных

Скопируйте полную модель CRM для безопасной сериализации типов (например, класс, интерфейс или определение типа).

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

Часто задаваемые вопросы

Распространенные вопросы о шаблоне бэкенда CRM приложения.

Что такое Back4app?

Почему использовать Back4app для CRM-приложения Next.js?

Как мне запросить сделки по этапу в Next.js?

Могу ли я использовать Server Actions с Back4app?

Доверяют разработчики по всему миру

Присоединяйтесь к сообществу, строящему будущее приложений

Готовы создать свое CRM-приложение?

Начните свой проект Next.js за считанные минуты. Кредитная карта не требуется.

Строить с ИИ-агентом

Шаблон бэкенда CRM приложенияNext.js — Схема, API и AI руководство

Ключевые выводы

Что такое шаблон бэкенда CRM приложения Next.js?

Обзор

Основные функции CRM

Управление контактами

Управление компаниями

Конвейер сделок

Отслеживание активности

Пользователь и разрешения

Почему стоит создать ваш CRM бекенд Next.js с Back4app?

Основные преимущества

Разрабатывайте быстрее, без кода бэкенда

Безопасно по умолчанию

Поток в реальном времени

Встроенная аутентификация

Работает в оффлайне

Развертывание за минуты

Готовы попробовать?

Технический стек

ER диаграмма

Поток интеграции

Словарь данных

Безопасность и разрешения

ACL на уровне строк

Разрешения на уровне классов

Владение на основе указателей

Схема (JSON)

Создайте с помощью AI Agent

API Playground

Пошаговая интеграция Next.js

Шаг 1: Установите SDK Back4app Next.js

Шаг 2: Инициализируйте Back4app в вашем приложении

Шаг 3: Запросите контакты и сделки

Шаг 4: Создайте контакт или сделку

Шаг 5: Обновите стадию сделки и действия

Интеграция управления состоянием

Полная модель данных

Часто задаваемые вопросы

Доверяют разработчики по всему миру

Готовы создать свое CRM-приложение?

Шаблон бэкенда CRM приложения
Next.js — Схема, API и AI руководство