Iniciadores Rápidos
¿Cómo construir un backend para NextJS?

52min
Introducción
En este tutorial, aprenderás a construir un backend completo para una NextJS aplicación utilizando Back4app. 
Recorreremos la integración de características esenciales de Back4app—como la gestión de bases de datos, funciones de Cloud Code, APIs REST y GraphQL, autenticación de usuarios y consultas en tiempo real (Live Queries)—para crear un backend seguro, escalable y robusto que se comunique sin problemas con tu frontend de NextJS.
También verás cómo la configuración rápida y el entorno intuitivo de Back4app pueden reducir drásticamente el tiempo y el esfuerzo en comparación con la configuración manual de servidores y bases de datos. 
A lo largo del camino, obtendrás experiencia práctica con funcionalidades clave, incluyendo características de seguridad avanzadas, programación de tareas con Cloud Jobs y configuración de webhooks para integraciones externas.
Al final de este tutorial, estarás bien preparado para mejorar esta configuración básica en una aplicación lista para producción o incorporar fácilmente lógica personalizada y APIs de terceros según sea necesario.
Requisitos previos
Para completar este tutorial, necesitarás:
Una cuenta de Back4app y un nuevo proyecto de Back4app
 Comenzando con Back4app.
Si no tienes una cuenta, puedes crear una gratis. Sigue la guía anterior para preparar tu proyecto.
Un entorno de desarrollo básico de NextJS
 Puedes configurarlo usando Crear Next App o una herramienta similar. Asegúrate de tener Node.js instalado en tu máquina.
Node.js (versión 14 o superior) instalado
Necesitarás Node.js para instalar paquetes npm y ejecutar servidores de desarrollo locales. Instalando Node.js﻿
Familiaridad con JavaScript y conceptos básicos de NextJS
 Documentación oficial de NextJS.﻿
Asegúrate de tener todos estos requisitos previos en su lugar antes de comenzar. Tener tu proyecto de Back4app configurado y tu entorno local de NextJS listo te ayudará a seguir más fácilmente.
Paso 1 – Configuración del Proyecto de Back4app
Crear un Nuevo Proyecto
El primer paso para construir tu backend de NextJS en Back4app es crear un nuevo proyecto. Si aún no has creado uno, sigue estos pasos:
Inicia sesión en tu cuenta de Back4app.
Haz clic en el botón “Nueva App” en tu panel de control de Back4app.
Dale un nombre a tu app (por ejemplo, “NextJS-Backend-Tutorial”).
﻿
Una vez que se crea el proyecto, lo verás listado en tu panel de control de Back4app. Este proyecto será la base para todas las configuraciones de backend discutidas en este tutorial.
Conectar el SDK de Parse
Back4app se basa en la Plataforma Parse para gestionar tus datos, proporcionar características en tiempo real, manejar la autenticación de usuarios y más. Conectar tu aplicación NextJS a Back4app implica instalar el paquete npm de parse e inicializarlo con las credenciales de tu panel de control de Back4app.
Recupera tus claves de Parse:
En tu panel de control de Back4app, navega a la sección “Configuraciones de la App” o “Seguridad y Claves” de tu app para encontrar tu ID de Aplicación y Clave de JavaScript. También encontrarás la URL del Servidor Parse (a menudo en el formato https://parseapi.back4app.com).
﻿
Instala el SDK de Parse en tu proyecto NextJS:
Bash
npm install parse
npm install parse
﻿
Si estás usando Yarn, puedes instalarlo con:
Bash
yarn add parse
yarn add parse
﻿
Inicializa Parse en tu aplicación NextJS:
En un proyecto NextJS, podrías crear un archivo de utilidad (por ejemplo, parseConfig.js) en una carpeta como lib:
lib/parseConfig.js
// lib/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// lib/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
Este archivo asegura que cada vez que importes Parse en tus páginas o rutas API de NextJS, esté preconfigurado para conectarse a tu instancia específica de Back4app.
Al completar este paso, has establecido una conexión segura entre tu front end de NextJS y el backend de Back4app. Todas las solicitudes y transacciones de datos se enrutan de manera segura a través de este SDK, reduciendo la complejidad de las llamadas manuales REST o GraphQL (aunque aún puedes usarlas cuando sea necesario).
Paso 2 – Configuración de la Base de Datos
Guardando y Consultando Datos
Con tu proyecto de Back4app configurado y el SDK de Parse integrado en tu aplicación NextJS, ahora puedes comenzar a guardar y recuperar datos. La forma más sencilla de crear un registro es usar la Parse.Object clase:
JS
// Example: Create a Todo item

import Parse from '../lib/parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

// Example: Query all Todo items

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
// Example: Create a Todo item

import Parse from '../lib/parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

// Example: Query all Todo items

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Alternativamente, puedes usar los endpoints de la API REST de Back4app:
Curl
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
Back4app también proporciona una interfaz GraphQL:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
Estas diversas opciones te permiten integrar operaciones de datos de la manera que mejor se adapte a tu proceso de desarrollo, ya sea a través del SDK de Parse, REST o GraphQL.
Diseño de Esquema y Tipos de Datos
Por defecto, Parse permite la creación de esquemas sobre la marcha, pero también puedes definir tus clases y tipos de datos en el panel de control de Back4app para tener más control.
Navega a la sección “Base de datos” en tu panel de control de Back4app.
Crea una nueva clase (por ejemplo, “Todo”) y agrega columnas relevantes, como título (String) y isCompleted (Boolean). 
Crear Nueva Clase
﻿
Back4app también admite varios tipos de datos: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, y Polygon. Puedes elegir el tipo apropiado para cada campo. Si lo prefieres, también puedes dejar que Parse cree automáticamente estas columnas cuando guardes un objeto desde tu aplicación NextJS por primera vez.
Crear Columna
﻿
Back4app ofrece un Agente de IA que puede ayudarte a diseñar tu modelo de datos:
Abre el Agente de IA desde tu Panel de Aplicaciones o en el menú.
Describe tu modelo de datos en un lenguaje simple (por ejemplo, “Por favor, crea una nueva aplicación ToDo en back4app con un esquema de clase completo.”).
Deja que el Agente de IA cree el Esquema por ti. 
﻿
Usar el Agente de IA puede ahorrarte tiempo al configurar tu arquitectura de datos y asegurar consistencia en tu aplicación.
Datos Relacionales
Si tienes datos relacionales—digamos, un Categoría objeto que apunta a múltiples Todo elementos—puedes usar Punteros o Relaciones en Parse. Por ejemplo, agregar un puntero a una Categoría:
JS
// Linking a Task to a Category with a pointer
async function createTaskForCategory(categoryObjectId, title) {
  const todo = new Parse.Object('Todo');

  // Construct a pointer to the category
  const categoryPointer = new Parse.Object('Category');
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}
// Linking a Task to a Category with a pointer
async function createTaskForCategory(categoryObjectId, title) {
  const todo = new Parse.Object('Todo');

  // Construct a pointer to the category
  const categoryPointer = new Parse.Object('Category');
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}
﻿
Cuando consultas, también puedes incluir datos de punteros:
JS
const query = new Parse.Query('Todo');
query.include('category');
const todosWithCategory = await query.find();
const query = new Parse.Query('Todo');
query.include('category');
const todosWithCategory = await query.find();
﻿
Esta include('category') llamada obtiene los detalles de la categoría junto a cada Todo, haciendo que tus datos relacionales sean accesibles sin problemas.
Consultas en Vivo
Para actualizaciones en tiempo real, Back4app proporciona Consultas en Vivo. En tu aplicación NextJS, puedes suscribirte a cambios en una clase específica:
Habilitar Consultas en Vivo en el panel de control de Back4app bajo la configuración de su Configuración del Servidor. Asegúrese de que “Consultas en Vivo” esté activado.
Inicializar una Suscripción a Consultas en Vivo en su código:
lib/parseConfig.js
// lib/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';

export default Parse;
// lib/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';

export default Parse;
﻿
JS
import Parse from '../lib/parseConfig';

async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    console.log('New Todo created:', newTodo);
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    console.log('Todo updated:', updatedTodo);
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    console.log('Todo deleted:', deletedTodo);
    callback('delete', deletedTodo);
  });

  return subscription;
}
import Parse from '../lib/parseConfig';

async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    console.log('New Todo created:', newTodo);
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    console.log('Todo updated:', updatedTodo);
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    console.log('Todo deleted:', deletedTodo);
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
Al suscribirse, recibe notificaciones en tiempo real cada vez que se crea, actualiza o elimina una nueva tarea. Esta función es particularmente valiosa para aplicaciones colaborativas o dinámicas donde múltiples usuarios necesitan ver los últimos datos sin actualizar la página.
Paso 3 – Aplicando Seguridad con ACLs y CLPs
Mecanismo de Seguridad de Back4app
Back4app toma la seguridad en serio al proporcionar Listas de Control de Acceso (ACLs) y Permisos a Nivel de Clase (CLPs). Estas características te permiten restringir quién puede leer o escribir datos a nivel de objeto o de clase, asegurando que solo los usuarios autorizados puedan modificar tus datos.
﻿
Listas de Control de Acceso (ACLs)
Una ACL se aplica a objetos individuales para determinar qué usuarios, roles o el público pueden realizar operaciones de lectura/escritura. Por ejemplo:
JS
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  // Create an ACL granting read/write access only to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  // Create an ACL granting read/write access only to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
﻿
Este es un ejemplo adicional para ilustrar el uso de ACLs.
Cuando guardas el objeto, tiene un ACL que impide que cualquier persona, excepto el usuario especificado, lo lea o lo modifique.
Editar ACL
﻿
Permisos a Nivel de Clase (CLPs)
Los CLPs gobiernan los permisos predeterminados de toda una clase, como si la clase es legible o escribible públicamente, o si solo ciertos roles pueden acceder a ella.
Ve a tu Panel de Control de Back4app, selecciona tu aplicación y abre la Base de Datos sección.
Selecciona una clase (por ejemplo, “Todo”).
Abre la pestaña de Permisos a Nivel de Clase.
Configura tus predeterminados, como “Requiere Autenticación” para leer o escribir, o “Sin Acceso” para el público.
﻿
Estos permisos establecen la línea base, mientras que los ACLs ajustan los permisos para objetos individuales. Un modelo de seguridad robusto combina típicamente tanto CLPs (restricciones amplias) como ACLs (restricciones detalladas por objeto). Para más información, ve a Directrices de Seguridad de la Aplicación.﻿
Paso 4 – Escribir y Desplegar Funciones en la Nube
El Código en la Nube es una característica del entorno de Parse Server que te permite ejecutar código JavaScript personalizado en el lado del servidor, sin necesidad de gestionar tus servidores o infraestructura. Al escribir Código en la Nube, puedes extender tu backend de Back4app con lógica de negocio adicional, validaciones, disparadores e integraciones que se ejecutan de manera segura y eficiente en el Parse Server.
Cómo Funciona
Cuando escribes Código en la Nube, normalmente colocas tus funciones de JavaScript, disparadores y cualquier módulo NPM requerido en un main.js (o app.js) archivo. Este archivo se despliega luego en tu proyecto de Back4app y se ejecuta dentro del entorno de Parse Server. Dado que estas funciones y disparadores se ejecutan en el servidor, puedes confiar en que manejan lógica confidencial, procesan datos sensibles o realizan llamadas a API solo del backend, procesos que quizás no quieras exponer directamente al cliente.
Todo el código en la nube para tu aplicación Back4app se ejecuta dentro del servidor Parse que es gestionado por Back4app, por lo que no tienes que preocuparte por el mantenimiento del servidor, la escalabilidad o la provisión. Cada vez que actualizas y despliegas tu main.js archivo, el servidor Parse en ejecución se actualiza con tu último código.
Estructura del archivo main.js
Un típico main.js podría contener:
Declaraciones de Require para cualquier módulo necesario (paquetes NPM, módulos integrados de Node, u otros archivos de código en la nube).
Definiciones de funciones en la nube usando Parse.Cloud.define().
Disparadores como Parse.Cloud.beforeSave(), Parse.Cloud.afterSave(), etc.
Módulos NPM que instalaste (si es necesario). Por ejemplo, podrías instalar un paquete como axios para hacer solicitudes HTTP. Luego puedes requerir (o importar) en la parte superior de tu archivo.
JS
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
﻿
Con la capacidad de instalar y usar módulos NPM, el código en la nube se vuelve increíblemente flexible, permitiéndote integrarte con APIs externas, realizar transformaciones de datos o ejecutar lógica compleja del lado del servidor.
Casos de Uso Típicos
Lógica de Negocios: Por ejemplo, puedes calcular la puntuación de un usuario en un juego agregando múltiples propiedades de objeto, y luego almacenar esos datos automáticamente.
Validaciones de Datos: Asegúrate de que ciertos campos estén presentes o de que un usuario tenga los permisos correctos antes de guardar o eliminar un registro.
Disparadores: Realiza acciones cuando los datos cambian (por ejemplo, envía una notificación cuando un usuario actualiza su perfil).
Integraciones: Conéctate con APIs o servicios de terceros. Por ejemplo, podrías integrarte con pasarelas de pago, notificaciones de Slack o plataformas de marketing por correo electrónico directamente desde Cloud Code.
Aplicación de Seguridad: Agrega una capa adicional de seguridad validando y sanitizando los parámetros de entrada en tus funciones de Cloud Code. Por ejemplo, puedes asegurarte de que los datos entrantes coincidan con formatos específicos, rechazar entradas inválidas o maliciosas, y hacer cumplir reglas de acceso basadas en roles o permisos de usuario antes de realizar operaciones sensibles.
Despliega Tu Función
A continuación se muestra una función simple de Cloud Code que calcula la longitud de una cadena de texto enviada desde el cliente:
main.js
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
Desplegando a través de la Back4app CLI:
1 - Instalar el CLI:
Para Linux/MacOS:
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
Para Windows:
Descarga el b4a.exe archivo de la página de lanzamientos.
2 - Configura tu clave de cuenta:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
3 - Despliega tu código en la nube:
Bash
b4a deploy
b4a deploy
﻿
Desplegando a través del Panel de Control:
En el panel de control de tu aplicación, ve a Código en la Nube > Funciones.
Copia/pega la función en el main.js editor.
Haz clic en Desplegar.
﻿
Llamando a tu función
Desde un entorno NextJS usando el SDK de Parse (por ejemplo, en una ruta de API o una página):
JS
import Parse from '../../lib/parseConfig';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const text = req.body.text || '';
      const result = await Parse.Cloud.run('calculateTextLength', { text });
      return res.status(200).json(result);
    } catch (err) {
      console.error('Error calling cloud function:', err);
      return res.status(500).json({ error: 'Something went wrong' });
    }
  } else {
    return res.status(405).json({ error: 'Method not allowed' });
  }
}
import Parse from '../../lib/parseConfig';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const text = req.body.text || '';
      const result = await Parse.Cloud.run('calculateTextLength', { text });
      return res.status(200).json(result);
    } catch (err) {
      console.error('Error calling cloud function:', err);
      return res.status(500).json({ error: 'Something went wrong' });
    }
  } else {
    return res.status(405).json({ error: 'Method not allowed' });
  }
}
﻿
También puedes llamarlo a través de REST:
Curl
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"text": "Hello Back4app"}' \
  https://parseapi.back4app.com/functions/calculateTextLength
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"text": "Hello Back4app"}' \
  https://parseapi.back4app.com/functions/calculateTextLength
﻿
O a través de GraphQL:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
Esta flexibilidad te permite integrar tu lógica personalizada en tu frontend de NextJS o cualquier otro cliente que soporte REST o GraphQL.
Paso 5 – Configurando la Autenticación de Usuarios
Autenticación de Usuarios en Back4app
Back4app aprovecha la Parse User clase como base para la autenticación. Por defecto, Parse maneja el hash de contraseñas, los tokens de sesión y el almacenamiento seguro. Esto significa que no tienes que configurar flujos de seguridad complejos manualmente.
Configurando la Autenticación de Usuarios
En NextJS, puedes crear un nuevo usuario con:
JS
import Parse from '../../lib/parseConfig';

export async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
    return user;
  } catch (error) {
    console.error('Error signing up user:', error);
    throw error;
  }
}

export async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
    return user;
  } catch (error) {
    console.error('Error logging in user:', error);
    throw error;
  }
}
import Parse from '../../lib/parseConfig';

export async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
    return user;
  } catch (error) {
    console.error('Error signing up user:', error);
    throw error;
  }
}

export async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
    return user;
  } catch (error) {
    console.error('Error logging in user:', error);
    throw error;
  }
}
﻿
A través de REST, un inicio de sesión podría verse así:
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secret123' \
  https://parseapi.back4app.com/login
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secret123' \
  https://parseapi.back4app.com/login
﻿
Gestión de Sesiones
Después de un inicio de sesión exitoso, Parse crea un token de sesión que se almacena en el objeto del usuario. Puedes recuperar el usuario actualmente conectado en NextJS (por ejemplo, en una ruta de API) así:
JS
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
﻿
Parse maneja automáticamente las sesiones basadas en tokens en segundo plano, pero también puedes gestionarlas o revocarlas manualmente. Esto es útil cuando necesitas cerrar sesión:
JS
await Parse.User.logOut();
await Parse.User.logOut();
﻿
Integración de Inicio de Sesión Social
Back4app y Parse pueden integrarse con proveedores populares de OAuth, como Google o Facebook, instalando paquetes adicionales o utilizando adaptadores existentes. Por ejemplo, puedes configurar un inicio de sesión de Facebook configurando tu ID de Aplicación de Facebook y utilizando Parse.FacebookUtils.logIn(). Las instrucciones detalladas varían, así que consulta la Documentación de Inicio de Sesión Social.﻿
JS
const facebookLogin = async () => {
  try {
    const user = await Parse.FacebookUtils.logIn('email');
    console.log(user.existed() ? 'User logged in' : 'User signed up and logged in');
  } catch (error) {
    console.error('Error logging in with Facebook:', error);
  }
};
const facebookLogin = async () => {
  try {
    const user = await Parse.FacebookUtils.logIn('email');
    console.log(user.existed() ? 'User logged in' : 'User signed up and logged in');
  } catch (error) {
    console.error('Error logging in with Facebook:', error);
  }
};
﻿
Verificación de Correo Electrónico y Restablecimiento de Contraseña
Para habilitar la verificación de correo electrónico y el restablecimiento de contraseña:
Navega a la Configuración de Correo Electrónico en tu panel de Back4app.
Habilita la verificación de correo electrónico para asegurar que los nuevos usuarios verifiquen la propiedad de sus direcciones de correo electrónico.
Configura la dirección del remitente, las plantillas de correo electrónico y tu dominio personalizado si lo deseas.
Estas características mejoran la seguridad de la cuenta y la experiencia del usuario al validar la propiedad del correo electrónico y proporcionar un método seguro de recuperación de contraseña.
Paso 6 – Manejo del Almacenamiento de Archivos
Subida y Recuperación de Archivos
Parse incluye la Parse.File clase para manejar la subida de archivos, que Back4app almacena de forma segura:
JS
import Parse from '../../lib/parseConfig';

async function uploadImage(file) {
  // file could come from a <input type="file" ...> in a NextJS page
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
    throw err;
  }
}
import Parse from '../../lib/parseConfig';

async function uploadImage(file) {
  // file could come from a <input type="file" ...> in a NextJS page
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
    throw err;
  }
}
﻿
Para adjuntar el archivo a un objeto en la base de datos, puedes hacer:
JS
async function createPhotoObject(file) {
  const Photo = Parse.Object.extend('Photo');
  const photo = new Photo();
  const parseFile = new Parse.File(file.name, file);
  photo.set('imageFile', parseFile);

  return await photo.save();
}
async function createPhotoObject(file) {
  const Photo = Parse.Object.extend('Photo');
  const photo = new Photo();
  const parseFile = new Parse.File(file.name, file);
  photo.set('imageFile', parseFile);

  return await photo.save();
}
﻿
Recuperar la URL del archivo es sencillo:
JS
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
﻿
Puedes mostrar esta imageUrl en tus componentes de NextJS configurándola como el src de una <img> etiqueta.
Seguridad de Archivos
Parse Server proporciona configuraciones flexibles para gestionar la seguridad de la carga de archivos. El siguiente ejemplo muestra cómo puedes establecer permisos para controlar quién puede cargar archivos en el servidor:
JSON
{
    "fileUpload": {
        "enableForPublic": true,
        "enableForAnonymousUser": true,
        "enableForAuthenticatedUser": true
    }
}
{
    "fileUpload": {
        "enableForPublic": true,
        "enableForAnonymousUser": true,
        "enableForAuthenticatedUser": true
    }
}
﻿
enableForPublic: Cuando se establece en verdadero, permite que cualquier persona, independientemente del estado de autenticación, cargue archivos.
enableForAnonymousUser: Controla si los usuarios anónimos (no registrados) pueden cargar archivos. Cuando está habilitado, los usuarios temporales o invitados pueden cargar archivos.
enableForAuthenticatedUser: Especifica si solo los usuarios autenticados pueden cargar archivos. Esto es ideal para asegurar que solo los usuarios de confianza tengan acceso a esta funcionalidad.
Paso 7 – Programación de Tareas con Cloud Jobs
Cloud Jobs
Trabajos en la Nube en Back4app te permiten programar y ejecutar tareas rutinarias en tu backend, como limpiar datos antiguos o enviar un correo electrónico de resumen diario. Un trabajo en la nube típico podría verse así:
JS
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
Despliega tu Código en la Nube con el nuevo trabajo (a través de CLI o el panel de control).
Ve al Panel de Control de Back4app > Configuraciones de la Aplicación > Configuraciones del Servidor > Trabajos en Segundo Plano. 
Programa el trabajo para que se ejecute diariamente o en el intervalo que mejor se adapte a tus necesidades.
Programando un Trabajo en la Nube
﻿
Los Trabajos en la Nube te permiten automatizar el mantenimiento en segundo plano u otros procesos periódicos, sin requerir intervención manual.
Paso 8 – Integrando Webhooks
Webhooks permiten que tu aplicación Back4app envíe solicitudes HTTP a un servicio externo cada vez que ocurren ciertos eventos. Esto es poderoso para integrarse con sistemas de terceros como pasarelas de pago (por ejemplo, Stripe), herramientas de marketing por correo electrónico o plataformas de análisis.
Navega a la configuración de Webhooks en tu panel de Back4app > Más > WebHooks y luego haz clic en Agregar Webhook.
Configura un endpoint (por ejemplo, https://your-external-service.com/webhook-endpoint).
Configura los disparadores para especificar qué eventos en tus clases de Back4app o funciones de Cloud Code activarán el webhook.
Agregando un Webhook
﻿
Por ejemplo, si deseas notificar a un canal de Slack cada vez que se crea un nuevo Todo:
Crea una aplicación de Slack que acepte webhooks entrantes.
Copia la URL del webhook de Slack.
En tu panel de Back4app, establece el endpoint a esa URL de Slack para el evento “Nuevo registro en la clase Todo.”
También puedes agregar encabezados HTTP personalizados o cargas útiles si es necesario.
También puedes definir Webhooks en Cloud Code haciendo solicitudes HTTP personalizadas en disparadores como beforeSave, afterSave:
WebHook BeforeSave
﻿
Paso 9 – Explorando el Panel de Administración de Back4app
La Aplicación de Administración de Back4app es una interfaz de gestión basada en la web diseñada para usuarios no técnicos para realizar operaciones CRUD y manejar tareas rutinarias de datos sin escribir ningún código. Proporciona una interfaz centrada en el modelo, amigable para el usuario que simplifica la administración de bases de datos, la gestión de datos personalizados y las operaciones a nivel empresarial.
Habilitando la Aplicación de Administración
Habilítala yendo a App Dashboard > Más > Aplicación de Administración y haciendo clic en el botón “Habilitar Aplicación de Administración”. 
Habilitar Aplicación de Administración
﻿
Crea un Primer Usuario Administrador (nombre de usuario/contraseña), lo que genera automáticamente un nuevo rol (B4aAdminUser) y clases (B4aSetting, B4aMenuItem y B4aCustomField) en el esquema de tu aplicación.
﻿
Elige un Subdominio para acceder a la interfaz de administración y completa la configuración.
﻿
Iniciar sesión utilizando las credenciales de administrador que creaste para acceder a tu nuevo panel de control de la aplicación de administración.
﻿
Una vez habilitada, la aplicación de administración de Back4app facilita la visualización, edición o eliminación de registros de tu base de datos, sin requerir el uso directo del panel de control de Parse o código de backend. Con controles de acceso configurables, puedes compartir de manera segura esta interfaz con miembros del equipo o clientes que necesiten una forma clara y fácil de gestionar datos.
Conclusión
Al seguir este tutorial completo, has:
Creó un backend seguro para una aplicación NextJS en Back4app.
Configuró una base de datos con esquemas de clase, tipos de datos y relaciones.
Integró consultas en tiempo real (Consultas en Vivo) para actualizaciones de datos inmediatas.
Aplicó medidas de seguridad utilizando ACLs y CLPs para proteger y gestionar el acceso a los datos.
Implementó funciones de Cloud Code para ejecutar lógica de negocio personalizada en el lado del servidor.
Configuró la autenticación de usuarios con soporte para verificación de correo electrónico y restablecimiento de contraseñas.
Gestionó cargas de archivos y recuperación, con controles de seguridad de archivos opcionales.
Programó trabajos en la nube para tareas automatizadas en segundo plano.
Usó Webhooks para integrarse con servicios externos.
Exploró el Panel de Administración de Back4app para la gestión de datos.
Con un sólido front end de NextJS y un robusto backend de Back4app, ahora está bien equipado para desarrollar aplicaciones ricas en funciones, escalables y seguras. Continúe explorando funcionalidades más avanzadas, integre su lógica de negocio y aproveche el poder de Back4app para ahorrarle innumerables horas en la administración de servidores y bases de datos. ¡Feliz codificación!
Próximos Pasos
Construir una aplicación NextJS lista para producción ampliando este backend para manejar modelos de datos más complejos, estrategias de caché y optimizaciones de rendimiento.
Integrar características avanzadas como flujos de autenticación especializados, control de acceso basado en roles o APIs externas (como pasarelas de pago).
Consulta la documentación oficial de Back4app para profundizar en seguridad avanzada, ajuste de rendimiento y análisis de registros.
Explora otros tutoriales sobre aplicaciones de chat en tiempo real, paneles de IoT o servicios basados en ubicación. Puedes combinar las técnicas aprendidas aquí con APIs de terceros para crear aplicaciones complejas del mundo real.
﻿
Actualizado 23 Jan 2025
¿Esta página le fue útil?
¿Cómo construir un backend para NodeJS?
¿Cómo construir un backend para AngularJS?