Template di NextJS
Costruisci l'app di biglietteria con Next.js, Vercel e Back4App

30min
In questo tutorial, costruiremo un Ticketing System utilizzando Next.js con l'app router, Back4App come servizio backend, e Tailwind CSS per lo styling. L'app consente agli utenti di creare, aggiornare, visualizzare e eliminare i biglietti, utilizzando Parse Server su Back4App per la gestione del database.
1. Requisiti
Prima di iniziare, assicurati di avere:
Node.js installato sul tuo computer (Guida all'installazione di Node.js).
Un account Back4App (Registrati gratuitamente).
Un account Vercel per il deployment (Registrati per Vercel).
2. Configurazione di Back4App
Accedi al tuo dashboard di Back4App e crea un nuovo progetto.
Naviga nel Data Browser e crea una nuova classe chiamata Ticket con il seguente schema:
Nome del campo
Tipo
titolo
Stringa
descrizione
Stringa
categoria
Stringa
priorità
Numero
progresso
Numero
stato
Stringa
creatoIl
Data     (generato automaticamente)
aggiornatoA
Data     (generato automaticamente)
3. Configurazione del Frontend (Next.js)
3.1 Crea un nuovo progetto Next.js
Esegui il seguente comando per creare un nuovo progetto 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 Installa le dipendenze
Installa Tailwind CSS, Font Awesome, e Parse SDK per le operazioni di 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 Configura Tailwind CSS
Modifica il tailwind.config.js file per configurare i percorsi dei contenuti di 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: [],
}
﻿
In styles/globals.css, aggiungi le importazioni di Tailwind:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.4 Crea la struttura del progetto
Seguendo la struttura fornita, crea le directory e i componenti necessari.
Struttura delle directory:
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. Configurazione del Client Parse
Nella /lib cartella, crea un parseClient.js file per configurare il SDK di 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;
﻿
Sostituisci 'YOUR_APP_ID' e 'YOUR_JS_KEY' con le credenziali del tuo progetto Back4App.
5. Creazione dei Componenti Chiave
5.1 TicketForm
Questo componente gestirà sia la creazione che l'aggiornamento dei ticket.
In /components/TicketForm.jsx, crea il seguente:
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
Questo componente visualizzerà le informazioni sui singoli biglietti.
In /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 EliminaBlocco
Un componente di conferma per eliminare i biglietti:
In /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 VisualizzazioneProgresso
Questo componente mostra il progresso come una barra percentuale:
In /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>
  );
}
﻿
6. Pagine e Routing
6.1 Elenco dei Ticket
In /app/page.js, visualizza l'elenco dei ticket:
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 Dettagli e Modifica del Ticket
In /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. Distribuzione su Vercel 
7.1: Crea un Account Vercel
Se non hai già un account Vercel, vai su vercel.com e crea un account.
Puoi registrarti con GitHub, GitLab o Bitbucket. Vercel rende facile collegare il tuo repository direttamente per le distribuzioni.
7.2: Carica il tuo Codice su GitHub
Per distribuire la tua app su Vercel, devi avere il tuo progetto ospitato su una piattaforma di controllo versione come GitHub (o GitLab/Bitbucket).
Se il tuo progetto non è ancora su GitHub, segui questi passaggi:
Inizializza git nella directory del tuo progetto:
bashCopy codegit init
Aggiungi il tuo progetto a GitHub:
bashCopy codegit add .
git commit -m "Commit iniziale"
git branch -M main
git remote add origin https://github.com/YOUR_GITHUB_USERNAME/ticketing-app.git
git push -u origin main
7.3: Installa Vercel CLI (Opzionale) 
Se preferisci distribuire direttamente dalla riga di comando, installa il Vercel CLI globalmente:
bashCopy codenpm install -g vercel
In alternativa, puoi distribuire tramite il dashboard di Vercel, che tratteremo nel prossimo passaggio.
7.4: Collega il tuo repository GitHub a Vercel
Vai a Vercel.
Clicca su Nuovo Progetto.
Scegli il repository Git che contiene il tuo progetto Next.js.
Configura il tuo progetto:
Vercel rileverà automaticamente che si tratta di un progetto Next.js e applicherà le impostazioni di build corrette.
Imposta la Directory Radice sulla cartella del progetto (se necessario).
7.5: Imposta le Variabili d'Ambiente 
Dovrai configurare le tue credenziali Back4App e qualsiasi altra variabile d'ambiente in Vercel.
Nelle Impostazioni del Progetto, vai alla sezione Variabili d'Ambiente.
Aggiungi le seguenti variabili d'ambiente:
7.6: Configura Parse in .env.local (Opzionale)
Se utilizzi variabili d'ambiente locali durante lo sviluppo, assicurati di creare un file .env.local nella directory principale del tuo progetto con le seguenti variabili:
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
Queste variabili di ambiente saranno utilizzate anche da Vercel una volta impostate nel dashboard di Vercel.
7.7: Configura le impostazioni di build (Opzionale)
Assicurati che la versione di Node.js e il comando di build siano configurati correttamente (Vercel lo rileva automaticamente).
Per le app Next.js, le impostazioni predefinite dovrebbero essere:
Comando di build: npm run build
Directory di output: .next/
7.8: Distribuisci il progetto
Dopo aver collegato il tuo repository GitHub, Vercel attiverà automaticamente un processo di build e deployment.
Puoi visualizzare lo stato della tua build nel dashboard di Vercel.
7.9: Controlla i Log di Deployment 
Se si verificano problemi durante il deployment, puoi ispezionare i log di deployment per risolverli.
7.10: Accedi alla tua App Deployata 
Una volta che il deployment è riuscito, Vercel ti fornirà un URL unico dove la tua app Next.js è attiva. Puoi visitare l'URL per accedere alla tua App di Ticketing deployata.
Ad esempio: https://your-app-name.vercel.app/
8. Garantire un Deployment Fluido
Credenziali Back4App: Controlla che le tue variabili d'ambiente Back4App siano impostate correttamente sia in .env.local (per lo sviluppo locale) che nel dashboard di Vercel (per la produzione).
CORS (Cross-Origin Resource Sharing): Assicurati che Back4App consenta il tuo URL Vercel nelle sue impostazioni CORS, che puoi configurare nel dashboard di Back4App sotto Sicurezza.
Testa la tua API: Prima di effettuare il deployment, testa le interazioni della tua API Back4App localmente per assicurarti che tutto funzioni senza problemi.
﻿
9. Conclusione
Con questi passaggi, la tua App di Ticketing Next.js dovrebbe ora essere deployata su Vercel, utilizzando Back4App per il backend. Questo completa il ciclo di sviluppo completo, dalla configurazione di Back4App, alla creazione del frontend in Next.js, fino al deployment dell'app live su Vercel.
Se desideri apportare aggiornamenti, basta inviare modifiche al tuo repository GitHub, e Vercel attiverà automaticamente un nuovo deployment.
Nome del campo	Tipo
titolo	Stringa
descrizione	Stringa
categoria	Stringa
priorità	Numero
progresso	Numero
stato	Stringa
creatoIl	Data (generato automaticamente)
aggiornatoA	Data (generato automaticamente)
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come costruire un backend per ReactJS?
AVANTI IL PROSSIMO
Tutorial on Billing App with Next.js, Vercel and Back4app