Plantillas de NextJS
Construyendo la aplicación de venta de entradas con Next.js, Vercel y Back4App

30min
En este tutorial, construiremos un Sistema de Tickets utilizando Next.js con el enrutador de aplicaciones, Back4App como el servicio backend, y Tailwind CSS para el estilo. La aplicación permite a los usuarios crear, actualizar, ver y eliminar tickets, mientras utiliza Parse Server en Back4App para la gestión de bases de datos.
1. Requisitos previos
Antes de comenzar, asegúrate de tener:
Node.js instalado en tu máquina (Guía de instalación de Node.js).
Cuenta de Back4App (Regístrate gratis).
Cuenta de Vercel para el despliegue (Regístrate en Vercel).
2. Configurando Back4App
Inicia sesión en tu panel de Back4App y crea un nuevo proyecto.
Navega a la Interfaz de Datos y crea una nueva clase llamada Ticket con el siguiente esquema:
Nombre del campo
Tipo
título
Cadena
descripción
Cadena
categoría
Cadena
prioridad
Número
progreso
Número
estado
Cadena
creadoEn
Fecha     (generado automáticamente)
actualizadoEn
Fecha     (generado automáticamente)
3. Configuración del Frontend (Next.js)
3.1 Crear un Nuevo Proyecto Next.js
Ejecuta el siguiente comando para crear un nuevo proyecto de Next.js:
Bash
npx create-next-app@latest ticketing-app
cd ticketing-app
npx create-next-app@latest ticketing-app
cd ticketing-app
﻿
3.2 Instalar Dependencias
Instalar Tailwind CSS, Font Awesome, y Parse SDK para operaciones de backend:
Bash
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
﻿
3.3 Configurar Tailwind CSS
Edita el tailwind.config.js archivo para configurar las rutas de contenido de Tailwind CSS:
JS
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
﻿
En styles/globals.css, añade las importaciones de Tailwind:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.4 Crear la Estructura del Proyecto
Siguiendo la estructura proporcionada, crea los directorios y componentes necesarios.
Estructura de Directorios:
Text
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
﻿
4. Configuración del Cliente Parse
En la /lib carpeta, crea un parseClient.js archivo para configurar el SDK de Parse.
JS
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
Reemplaza 'YOUR_APP_ID' y 'YOUR_JS_KEY' con las credenciales de tu proyecto de Back4App.
5. Creando los Componentes Clave
5.1 TicketForm
Este componente manejará tanto la creación como la actualización de tickets.
En /components/TicketForm.jsx, crea lo siguiente:
JS
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
﻿
5.2 TicketCard
Este componente mostrará información individual del ticket.
En /components/TicketCard.jsx:
JS
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
﻿
5.3 EliminarBloque
Un componente de confirmación para eliminar tickets:
En /components/DeleteBlock.jsx:
JS
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
﻿
5.4 MostrarProgreso
Este componente muestra el progreso como una barra de porcentaje:
En /components/ProgressDisplay.jsx:
JS
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
﻿
5.4 MostrarProgreso
6. Páginas y Enrutamiento
6.1 Lista de Tickets
En /app/page.js, muestra la lista de tickets:
JS
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
﻿
6.2 Detalle y Edición de Ticket
En /app/tickets/[id]/page.js:
JS
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

  if (!ticket) return <div>Loading...</div>;

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

  if (!ticket) return <div>Loading...</div>;

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
﻿
7. Desplegando en Vercel 
7.1: Crear una Cuenta en Vercel
Si aún no tienes una cuenta de Vercel, dirígete a vercel.com y crea una cuenta.
Puedes registrarte con GitHub, GitLab o Bitbucket. Vercel facilita la vinculación de tu repositorio directamente para despliegues.
7.2: Sube tu Código a GitHub
Para desplegar tu aplicación en Vercel, necesitas tener tu proyecto alojado en una plataforma de control de versiones como GitHub (o GitLab/Bitbucket).
Si tu proyecto aún no está en GitHub, sigue estos pasos:
Inicializa git en el directorio de tu proyecto:
bashCopy codegit init
Agrega tu proyecto a GitHub:
bashCopy codegit add .
git commit -m "Commit inicial"
git branch -M main
git remote add origin https://github.com/YOUR_GITHUB_USERNAME/ticketing-app.git
git push -u origin main
7.3: Instalar Vercel CLI (Opcional) 
Si prefieres desplegar directamente desde la línea de comandos, instala el Vercel CLI globalmente:
bashCopy codenpm install -g vercel
Alternativamente, puedes desplegar a través del panel de control de Vercel, que cubriremos a continuación.
7.4: Conectar tu repositorio de GitHub a Vercel
Ve a Vercel.
Haz clic en Nuevo Proyecto.
Elige el repositorio de Git que contiene tu proyecto Next.js.
Configura tu proyecto:
Vercel detectará automáticamente que es un proyecto Next.js y aplicará la configuración de construcción correcta.
Establece el Directorio Raíz en la carpeta del proyecto (si es necesario).
7.5: Establecer Variables de Entorno 
Necesitarás configurar tus credenciales de Back4App y cualquier otra variable de entorno en Vercel.
En la Configuración del Proyecto, ve a la sección de Variables de Entorno.
Agrega las siguientes variables de entorno:
7.6: Configurar Parse en .env.local (Opcional)
Si usas variables de entorno locales durante el desarrollo, asegúrate de crear un archivo .env.local en el directorio raíz de tu proyecto con las siguientes variables:
bashCopy codeNEXT_PUBLIC_PARSE_APP_ID=YOUR_APP_ID
NEXT_PUBLIC_PARSE_JS_KEY=YOUR_JS_KEY
NEXT_PUBLIC_PARSE_SERVER_URL=https://parseapi.back4app.com
Estas variables de entorno también serán utilizadas por Vercel una vez que estén configuradas en el panel de control de Vercel.
7.7: Configurar Ajustes de Construcción (Opcional)
Asegúrate de que la versión de Node.js y el comando de construcción estén correctamente configurados (Vercel lo detecta automáticamente).
Para aplicaciones de Next.js, la configuración predeterminada debería ser:
Comando de construcción: npm run build
Directorio de salida: .next/
7.8: Desplegar el Proyecto
Después de vincular tu repositorio de GitHub, Vercel activará automáticamente un proceso de construcción y despliegue.
Puedes ver el estado de tu construcción en el panel de Vercel.
7.9: Verificar los registros de despliegue 
Si surgen problemas durante el despliegue, puedes inspeccionar los registros de despliegue para depurarlos.
7.10: Acceder a tu aplicación desplegada 
Una vez que el despliegue sea exitoso, Vercel te proporcionará una URL única donde tu aplicación Next.js está activa. Puedes visitar la URL para acceder a tu aplicación de Ticketing desplegada.
Por ejemplo: https://your-app-name.vercel.app/
8. Asegurando un despliegue fluido
Credenciales de Back4App: Verifica que tus variables de entorno de Back4App estén configuradas correctamente tanto en .env.local (para desarrollo local) como en el panel de Vercel (para producción).
CORS (Compartición de Recursos de Origen Cruzado): Asegúrate de que Back4App permita tu URL de Vercel en su configuración de CORS, que puedes configurar en el panel de Back4App bajo Seguridad.
Prueba tu API: Antes de desplegar, prueba tus interacciones con la API de Back4App localmente para asegurarte de que todo funcione sin problemas.
﻿
9. Conclusión
Con estos pasos, tu Aplicación de Ticketing Next.js ahora debería estar desplegada en Vercel, utilizando Back4App para el backend. Esto completa el ciclo completo de desarrollo, desde la configuración de Back4App, la creación del frontend en Next.js, hasta el despliegue de la aplicación en vivo en Vercel.
Si deseas hacer actualizaciones, simplemente envía cambios a tu repositorio de GitHub, y Vercel activará automáticamente un nuevo despliegue.
Nombre del campo	Tipo
título	Cadena
descripción	Cadena
categoría	Cadena
prioridad	Número
progreso	Número
estado	Cadena
creadoEn	Fecha (generado automáticamente)
actualizadoEn	Fecha (generado automáticamente)
Actualizado 23 Jan 2025
¿Esta página le fue útil?
¿Cómo construir un backend para ReactJS?
Tutorial de aplicación de facturación con Next.js, Vercel y Back4app