NextJS-Vorlagen
Erstellung der Ticketing-App mit Next.js, Vercel und Back4App

30min
In diesem Tutorial werden wir ein Ticketing-System mit Next.js und dem App-Router, Back4App als Backend-Service und Tailwind CSS für das Styling erstellen. Die App ermöglicht es Benutzern, Tickets zu erstellen, zu aktualisieren, anzuzeigen und zu löschen, während sie Parse Server auf Back4App für die Datenbankverwaltung nutzen.
1. Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie:
Node.js auf Ihrem Computer installiert haben (Node.js Installationsanleitung).
Ein Back4App-Konto (Kostenlos anmelden).
Ein Vercel-Konto für die Bereitstellung (Für Vercel anmelden).
2. Einrichtung von Back4App
Melden Sie sich bei Ihrem Back4App-Dashboard an und erstellen Sie ein neues Projekt.
Navigieren Sie zum Datenbrowser und erstellen Sie eine neue Klasse namens Ticket mit dem folgenden Schema:
Feldname
Typ
Titel
Zeichenfolge
Beschreibung
Zeichenfolge
Kategorie
Zeichenfolge
Priorität
Nummer
Fortschritt
Nummer
Status
Zeichenfolge
erstelltAm
Datum     (automatisch generiert)
aktualisiertAm
Datum     (automatisch generiert)
3. Einrichtung des Frontends (Next.js)
3.1 Erstellen Sie ein neues Next.js-Projekt
Führen Sie den folgenden Befehl aus, um ein neues Next.js-Projekt zu erstellen:
Bash
npx create-next-app@latest ticketing-app
cd ticketing-app
npx create-next-app@latest ticketing-app
cd ticketing-app
﻿
3.2 Abhängigkeiten installieren
Installieren Sie Tailwind CSS, Font Awesome, und Parse SDK für Backend-Operationen:
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 Tailwind CSS einrichten
Bearbeiten Sie die tailwind.config.js-Datei, um die Tailwind CSS-Inhaltspfade zu konfigurieren:
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, fügen Sie die Tailwind-Imports hinzu:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.4 Erstellen Sie die Projektstruktur
Erstellen Sie gemäß der bereitgestellten Struktur die erforderlichen Verzeichnisse und Komponenten.
Verzeichnisstruktur:
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. Einrichtung des Parse-Clients
Im /lib-Ordner erstellen Sie eine parseClient.js-Datei, um das Parse SDK zu konfigurieren.
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;
﻿
Ersetzen Sie 'YOUR_APP_ID' und 'YOUR_JS_KEY' durch Ihre Back4App-Projektanmeldeinformationen.
5. Erstellung der Hauptkomponenten
5.1 TicketForm
Diese Komponente wird sowohl für das Erstellen als auch für das Aktualisieren von Tickets zuständig sein.
In /components/TicketForm.jsx, erstellen Sie Folgendes:
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
Diese Komponente zeigt individuelle Ticketinformationen an.
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 DeleteBlock
Eine Bestätigungskomponente zum Löschen von Tickets:
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 ProgressDisplay
Diese Komponente zeigt den Fortschritt als Prozentbalken an:
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>
  );
}
﻿
5.4 Fortschrittsanzeige
6. Seiten und Routing
6.1 Liste der Tickets
In /app/page.js, zeigen Sie die Liste der Tickets an:
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 Ticketdetails und Bearbeiten
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. Bereitstellung auf Vercel 
7.1: Erstellen Sie ein Vercel-Konto
Wenn Sie noch kein Vercel-Konto haben, gehen Sie zu vercel.com und erstellen Sie ein Konto.
Sie können sich mit GitHub, GitLab oder Bitbucket anmelden. Vercel macht es einfach, Ihr Repository direkt für Bereitstellungen zu verknüpfen.
7.2: Pushen Sie Ihren Code zu GitHub
Um Ihre App auf Vercel bereitzustellen, müssen Sie Ihr Projekt auf einer Versionskontrollplattform wie GitHub (oder GitLab/Bitbucket) gehostet haben.
Wenn Ihr Projekt noch nicht auf GitHub ist, folgen Sie diesen Schritten:
Initialisieren Sie git in Ihrem Projektverzeichnis:
bashCopy codegit init
Fügen Sie Ihr Projekt zu GitHub hinzu:
bashCopy codegit add .
git commit -m "Erster Commit"
git branch -M main
git remote add origin https://github.com/IHR_GITHUB_BENUTZERNAME/ticketing-app.git
git push -u origin main
7.3: Vercel CLI installieren (Optional) 
Wenn Sie es bevorzugen, direkt über die Befehlszeile bereitzustellen, installieren Sie die Vercel CLI global:
bashCopy codenpm install -g vercel
Alternativ können Sie über das Dashboard von Vercel bereitstellen, das wir als Nächstes behandeln werden.
7.4: Verbinden Sie Ihr GitHub-Repository mit Vercel
Gehe zu Vercel.
Klicke auf Neues Projekt.
Wähle das Git-Repository aus, das dein Next.js-Projekt enthält.
Konfiguriere dein Projekt:
Vercel wird automatisch erkennen, dass es sich um ein Next.js-Projekt handelt und die richtigen Build-Einstellungen anwenden.
Setze das Wurzelverzeichnis auf den Projektordner (falls erforderlich).
7.5: Umgebungsvariablen festlegen 
Du musst deine Back4App-Anmeldeinformationen und alle anderen Umgebungsvariablen in Vercel konfigurieren.
Gehe in den Projekteinstellungen, zu dem Umgebungsvariablen-Bereich.
Füge die folgenden Umgebungsvariablen hinzu:
7.6: Parse-Konfiguration in .env.local einrichten (Optional)
Wenn du während der Entwicklung lokale Umgebungsvariablen verwendest, stelle sicher, dass du eine .env.local-Datei in deinem Stammprojektverzeichnis mit den folgenden Variablen erstellst:
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
Diese Umgebungsvariablen werden auch von Vercel verwendet, sobald sie im Vercel-Dashboard festgelegt sind.
7.7: Build-Einstellungen konfigurieren (Optional)
Stellen Sie sicher, dass Node.js-Version und Build-Befehl korrekt konfiguriert sind (Vercel erkennt dies automatisch).
Für Next.js-Apps sollten die Standardeinstellungen sein:
Build-Befehl: npm run build
Ausgabeverzeichnis: .next/
7.8: Projekt bereitstellen
Nachdem Sie Ihr GitHub-Repository verlinkt haben, wird Vercel automatisch einen Build- und Bereitstellungsprozess auslösen.
Sie können den Status Ihres Builds im Vercel-Dashboard einsehen.
7.9: Überprüfen Sie die Bereitstellungsprotokolle 
Wenn während der Bereitstellung Probleme auftreten, können Sie die Bereitstellungsprotokolle überprüfen, um diese zu debuggen.
7.10: Greifen Sie auf Ihre bereitgestellte App zu 
Sobald die Bereitstellung erfolgreich ist, stellt Ihnen Vercel eine einzigartige URL zur Verfügung, unter der Ihre Next.js-App live ist. Sie können die URL besuchen, um auf Ihre bereitgestellte Ticketing-App zuzugreifen.
Zum Beispiel: https://your-app-name.vercel.app/
8. Sicherstellen einer reibungslosen Bereitstellung
Back4App-Anmeldeinformationen: Überprüfen Sie, ob Ihre Back4App-Umgebungsvariablen sowohl in .env.local (für die lokale Entwicklung) als auch im Vercel-Dashboard (für die Produktion) korrekt eingestellt sind.
CORS (Cross-Origin Resource Sharing): Stellen Sie sicher, dass Back4App Ihre Vercel-URL in seinen CORS-Einstellungen zulässt, die Sie im Back4App-Dashboard unter Sicherheit konfigurieren können.
Testen Sie Ihre API: Testen Sie vor der Bereitstellung Ihre Back4App-API-Interaktionen lokal, um sicherzustellen, dass alles reibungslos funktioniert.
﻿
9. Fazit
Mit diesen Schritten sollte Ihre Next.js Ticketing-App jetzt auf Vercel, unter Verwendung von Back4App für das Backend, bereitgestellt sein. Dies schließt den gesamten Entwicklungszyklus ab, von der Einrichtung von Back4App, über die Erstellung des Frontends in Next.js, bis hin zur Bereitstellung der App live auf Vercel.
Wenn Sie Aktualisierungen vornehmen möchten, pushen Sie einfach Änderungen in Ihr GitHub-Repository, und Vercel wird automatisch eine neue Bereitstellung auslösen.
Feldname	Typ
Titel	Zeichenfolge
Beschreibung	Zeichenfolge
Kategorie	Zeichenfolge
Priorität	Nummer
Fortschritt	Nummer
Status	Zeichenfolge
erstelltAm	Datum (automatisch generiert)
aktualisiertAm	Datum (automatisch generiert)
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man ein Backend für ReactJS aufbaut?
ALS NÄCHSTES
Rechnungserstellungs-App-Tutorial mit Next.js, Vercel und Back4app