NextJS-Vorlagen
Rechnungserstellungs-App-Tutorial mit Next.js, Vercel und Back4app

26min
In diesem Tutorial werden wir eine vollständige Invoicing App mit Next.js als Frontend, Back4App als Backend und zusätzlichen Diensten wie Clerk für die Authentifizierung, Stripe für Zahlungen und Resend für E-Mail-Benachrichtigungen erstellen. Diese Anleitung führt durch die Einrichtung der Authentifizierung, das Rechnungsmanagement, die Zahlungsabwicklung und die Bereitstellung auf Vercel.
1. Voraussetzungen
Stellen Sie vor dem Start sicher, dass Sie Folgendes haben:
Ein Back4App-Konto (Hier anmelden)
Ein Clerk-Konto (Clerk.io) für die Authentifizierung
Ein Stripe-Konto (Stripe.com) für die Zahlungsabwicklung
Ein Resend-Konto (Resend.io) für E-Mail-Benachrichtigungen
Node.js und npm installiert (Node.js Installation)
2. Einrichtung des Backends (Back4App)
2.1 Erstellen eines neuen Projekts in Back4App
Melden Sie sich bei Back4App an und erstellen Sie ein neues Projekt.
Navigieren Sie zum Datenbrowser und erstellen Sie die folgenden Klassen:
2.2 Datenmodelle (Klassen)
2.2.1 Benutzer (Automatisch von Clerk verwaltet)
Objekt-ID
Benutzername
E-Mail
2.2.2 Organisation
Erstellen Sie eine Klasse namens Organisation.
Fügen Sie die folgenden Spalten hinzu:
Name (String): Der Name der Organisation.
ownerId (Pointer<_User>): Zeigt auf die Benutzer-Klasse (automatisch von Clerk erstellt).
Mitglieder (Array<Pointer<_User>>): Ein Array von Benutzern, die zu dieser Organisation gehören.
2.2.3 Kunde
Erstellen Sie eine Klasse namens Kunde.
Fügen Sie diese Spalten hinzu:
Name (String): Name des Kunden.
E-Mail (String): E-Mail des Kunden.
organisationId (Pointer): Organisation, zu der dieser Kunde gehört.
2.2.4 Rechnung
Erstellen Sie eine Klasse namens Rechnung.
Fügen Sie diese Spalten hinzu:
Rechnungsnummer (String): Eindeutiger Rechnungsbezeichner.
Kunden-ID (Pointer): Verweist auf den Kunden.
Organisations-ID (Pointer): Verweist auf die Organisation.
Betrag (Number): Gesamtbetrag für die Rechnung.
Status (String): Optionen sind 'Entwurf', 'Gesendet', 'Bezahlt' und 'Überfällig'.
Fälligkeitsdatum (Date): Das Fälligkeitsdatum der Rechnung.
Artikel (Array): Die Liste der Artikel in der Rechnung.
2.2.5 Zahlung
Erstellen Sie eine Klasse namens Zahlung.
Fügen Sie diese Spalten hinzu:
Rechnungs-ID (Pointer): Verweist auf die zugehörige Rechnung.
Betrag (Number): Zahlungsbetrag.
stripeSessionId (String): Die ID der Stripe-Sitzung.
Status (String): Zahlungsstatus (z.B. 'ausstehend', 'erfolgreich', 'fehlgeschlagen').
3. Einrichtung des Frontends (Next.js)
3.1 Erstellen eines Next.js-Projekts
Beginnen Sie mit der Einrichtung Ihres Next.js-Projekts mit TypeScript, Tailwind CSS und shadcn/ui-Komponenten.
Bash
npx create-next-app@latest invoicing-app --typescript
cd invoicing-app
npm install tailwindcss postcss autoprefixer
npx tailwindcss init
npx create-next-app@latest invoicing-app --typescript
cd invoicing-app
npm install tailwindcss postcss autoprefixer
npx tailwindcss init
﻿
3.2 Tailwind CSS einrichten
Konfigurieren Sie Tailwind, indem Sie die tailwind.config.js aktualisieren und die Stile zu globals.css hinzufügen.
In tailwind.config.js:
JS
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
﻿
In styles/globals.css:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.3 Parse SDK und zusätzliche Dienste installieren
Installieren Sie die erforderlichen Abhängigkeiten für Parse, Clerk, Stripe und Resend.
Bash
npm install parse @clerk/clerk-next stripe resend
npm install parse @clerk/clerk-next stripe resend
﻿
3.4 Parse SDK in Next.js initialisieren
In pages/_app.tsx, initialisieren Sie das Parse SDK mit Ihren Back4App-Anmeldeinformationen:
TypeScript
import { ClerkProvider } from '@clerk/clerk-react';
import Parse from 'parse';

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

function MyApp({ Component, pageProps }) {
  return (
    <ClerkProvider>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

export default MyApp;
import { ClerkProvider } from '@clerk/clerk-react';
import Parse from 'parse';

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

function MyApp({ Component, pageProps }) {
  return (
    <ClerkProvider>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

export default MyApp;
﻿
Ersetzen Sie 'YOUR_APP_ID' und 'YOUR_JAVASCRIPT_KEY' durch Ihre Back4App-Anmeldeinformationen.
4. Implementierung der Benutzeranmeldung
4.1 Clerk-Integration für die Authentifizierung
Richten Sie Clerk für die Authentifizierung ein. Gehen Sie zum Dashboard von Clerk, erstellen Sie eine Anwendung und holen Sie sich Ihre API-Schlüssel. Aktualisieren Sie Ihre .env.local-Datei mit den Clerk-Schlüsseln.
Bash
NEXT_PUBLIC_CLERK_FRONTEND_API=your-clerk-frontend-api
CLERK_API_KEY=your-clerk-api-key
NEXT_PUBLIC_CLERK_FRONTEND_API=your-clerk-frontend-api
CLERK_API_KEY=your-clerk-api-key
﻿
Erstellen Sie jetzt pages/sign-in.tsx und pages/sign-up.tsx für die Anmelde- und Registrierungsfunktionalität mit Clerk-Komponenten.
In pages/sign-in.tsx:
Text
import { SignIn } from '@clerk/clerk-react';

export default function SignInPage() {
  return <SignIn />;
}
import { SignIn } from '@clerk/clerk-react';

export default function SignInPage() {
  return <SignIn />;
}
﻿
In pages/sign-up.tsx:
Text
import { SignUp } from '@clerk/clerk-react';

export default function SignUpPage() {
  return <SignUp />;
}
import { SignUp } from '@clerk/clerk-react';

export default function SignUpPage() {
  return <SignUp />;
}
﻿
5. Organisation und Kundenmanagement
5.1 Organisationen erstellen
Benutzer können Organisationen erstellen, die sie besitzen. Erstellen Sie eine Seite pages/organizations/new.tsx zum Erstellen neuer Organisationen.
Text
import { useState } from 'react';
import Parse from 'parse';

export default function NewOrganization() {
  const [name, setName] = useState('');

  const handleCreateOrganization = async () => {
    const Organization = Parse.Object.extend('Organization');
    const organization = new Organization();
    organization.set('name', name);
    organization.set('ownerId', Parse.User.current());

    try {
      await organization.save();
      alert('Organization created successfully!');
    } catch (error) {
      console.error('Error creating organization:', error);
    }
  };

  return (
    <div>
      <h1>Create New Organization</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Organization Name"
      />
      <button onClick={handleCreateOrganization}>Create</button>
    </div>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function NewOrganization() {
  const [name, setName] = useState('');

  const handleCreateOrganization = async () => {
    const Organization = Parse.Object.extend('Organization');
    const organization = new Organization();
    organization.set('name', name);
    organization.set('ownerId', Parse.User.current());

    try {
      await organization.save();
      alert('Organization created successfully!');
    } catch (error) {
      console.error('Error creating organization:', error);
    }
  };

  return (
    <div>
      <h1>Create New Organization</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Organization Name"
      />
      <button onClick={handleCreateOrganization}>Create</button>
    </div>
  );
}
﻿
5.2 Kunden verwalten
Erstellen Sie eine Kundenverwaltungsseite pages/customers/new.tsx zum Hinzufügen neuer Kunden.
Text
import { useState } from 'react';
import Parse from 'parse';

export default function NewCustomer() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleCreateCustomer = async () => {
    const Customer = Parse.Object.extend('Customer');
    const customer = new Customer();
    customer.set('name', name);
    customer.set('email', email);
    customer.set('organizationId', Parse.User.current().get('organizationId'));

    try {
      await customer.save();
      alert('Customer created successfully!');
    } catch (error) {
      console.error('Error creating customer:', error);
    }
  };

  return (
    <div>
      <h1>Create New Customer</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Customer Name"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Customer Email"
      />
      <button onClick={handleCreateCustomer}>Create</button>
    </div>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function NewCustomer() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleCreateCustomer = async () => {
    const Customer = Parse.Object.extend('Customer');
    const customer = new Customer();
    customer.set('name', name);
    customer.set('email', email);
    customer.set('organizationId', Parse.User.current().get('organizationId'));

    try {
      await customer.save();
      alert('Customer created successfully!');
    } catch (error) {
      console.error('Error creating customer:', error);
    }
  };

  return (
    <div>
      <h1>Create New Customer</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Customer Name"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Customer Email"
      />
      <button onClick={handleCreateCustomer}>Create</button>
    </div>
  );
}
﻿
6. Rechnungsverwaltung
6.1 Rechnungen erstellen
Erstellen Sie eine Seite zur Rechnungsstellung pages/invoices/new.tsx zum Generieren neuer Rechnungen.
Text
import { useState } from 'react';
import Parse from 'parse';

export default function NewInvoice() {
  const [invoiceNumber, setInvoiceNumber] = useState('');
  const [amount, setAmount] = useState(0);

  const handleCreateInvoice = async () => {
    const Invoice = Parse.Object.extend('Invoice');
    const invoice = new Invoice();
    invoice.set('invoiceNumber', invoiceNumber);
    invoice.set('amount', amount);
    invoice.set('organizationId', Parse.User.current().get('organizationId'));

    try {
      await invoice

.save();
      alert('Invoice created successfully!');
    } catch (error) {
      console.error('Error creating invoice:', error);
    }
  };

  return (
    <div>
      <h1>Create New Invoice</h1>
      <input
        type="text"
        value={invoiceNumber}
        onChange={(e) => setInvoiceNumber(e.target.value)}
        placeholder="Invoice Number"
      />
      <input
        type="number"
        value={amount}
        onChange={(e) => setAmount(parseFloat(e.target.value))}
        placeholder="Amount"
      />
      <button onClick={handleCreateInvoice}>Create</button>
    </div>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function NewInvoice() {
  const [invoiceNumber, setInvoiceNumber] = useState('');
  const [amount, setAmount] = useState(0);

  const handleCreateInvoice = async () => {
    const Invoice = Parse.Object.extend('Invoice');
    const invoice = new Invoice();
    invoice.set('invoiceNumber', invoiceNumber);
    invoice.set('amount', amount);
    invoice.set('organizationId', Parse.User.current().get('organizationId'));

    try {
      await invoice

.save();
      alert('Invoice created successfully!');
    } catch (error) {
      console.error('Error creating invoice:', error);
    }
  };

  return (
    <div>
      <h1>Create New Invoice</h1>
      <input
        type="text"
        value={invoiceNumber}
        onChange={(e) => setInvoiceNumber(e.target.value)}
        placeholder="Invoice Number"
      />
      <input
        type="number"
        value={amount}
        onChange={(e) => setAmount(parseFloat(e.target.value))}
        placeholder="Amount"
      />
      <button onClick={handleCreateInvoice}>Create</button>
    </div>
  );
}
﻿
6.2 Rechnungen anzeigen
Erstellen Sie eine Seite pages/invoices/index.tsx um alle Rechnungen mit Sortier- und Filteroptionen anzuzeigen.
Text
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function InvoicesList() {
  const [invoices, setInvoices] = useState([]);

  useEffect(() => {
    const fetchInvoices = async () => {
      const Invoice = Parse.Object.extend('Invoice');
      const query = new Parse.Query(Invoice);
      const results = await query.find();
      setInvoices(results);
    };
    fetchInvoices();
  }, []);

  return (
    <div>
      <h1>Invoices</h1>
      {invoices.map(invoice => (
        <div key={invoice.id}>
          <h2>Invoice #{invoice.get('invoiceNumber')}</h2>
          <p>Amount: ${invoice.get('amount')}</p>
          <p>Status: {invoice.get('status')}</p>
        </div>
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function InvoicesList() {
  const [invoices, setInvoices] = useState([]);

  useEffect(() => {
    const fetchInvoices = async () => {
      const Invoice = Parse.Object.extend('Invoice');
      const query = new Parse.Query(Invoice);
      const results = await query.find();
      setInvoices(results);
    };
    fetchInvoices();
  }, []);

  return (
    <div>
      <h1>Invoices</h1>
      {invoices.map(invoice => (
        <div key={invoice.id}>
          <h2>Invoice #{invoice.get('invoiceNumber')}</h2>
          <p>Amount: ${invoice.get('amount')}</p>
          <p>Status: {invoice.get('status')}</p>
        </div>
      ))}
    </div>
  );
}
﻿
7. Zahlungsabwicklung (Stripe-Integration)
7.1 Stripe Checkout einrichten
Um Zahlungen zu verarbeiten, integrieren Sie Stripe. In pages/invoices/[id].tsx, implementieren Sie die Erstellung des Zahlungslinks mit Stripe Checkout.
Text
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Stripe from 'stripe';

export default function InvoiceDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [invoice, setInvoice] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchInvoice = async () => {
      const Invoice = Parse.Object.extend('Invoice');
      const query = new Parse.Query(Invoice);
      query.equalTo('objectId', id);
      const result = await query.first();
      setInvoice(result);
    };
    fetchInvoice();
  }, [id]);

  const handlePayInvoice = async () => {
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'usd',
            product_data: { name: `Invoice #${invoice.get('invoiceNumber')}` },
            unit_amount: invoice.get('amount') * 100,
          },
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: window.location.origin + '/success',
      cancel_url: window.location.origin + '/cancel',
    });
    window.location.href = session.url;
  };

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

  return (
    <div>
      <h1>Invoice #{invoice.get('invoiceNumber')}</h1>
      <p>Amount: ${invoice.get('amount')}</p>
      <button onClick={handlePayInvoice}>Pay Now</button>
    </div>
  );
}
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Stripe from 'stripe';

export default function InvoiceDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [invoice, setInvoice] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchInvoice = async () => {
      const Invoice = Parse.Object.extend('Invoice');
      const query = new Parse.Query(Invoice);
      query.equalTo('objectId', id);
      const result = await query.first();
      setInvoice(result);
    };
    fetchInvoice();
  }, [id]);

  const handlePayInvoice = async () => {
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'usd',
            product_data: { name: `Invoice #${invoice.get('invoiceNumber')}` },
            unit_amount: invoice.get('amount') * 100,
          },
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: window.location.origin + '/success',
      cancel_url: window.location.origin + '/cancel',
    });
    window.location.href = session.url;
  };

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

  return (
    <div>
      <h1>Invoice #{invoice.get('invoiceNumber')}</h1>
      <p>Amount: ${invoice.get('amount')}</p>
      <button onClick={handlePayInvoice}>Pay Now</button>
    </div>
  );
}
﻿
8. E-Mail-Benachrichtigungen (Wiederholungsintegration)
8.1 Rechnungs-E-Mails senden
Richten Sie Resend ein, um Rechnungs-E-Mails an Kunden zu senden.
Text
import { Resend } from 'resend';

export default async function sendInvoiceEmail(invoiceId) {
  const resend = new Resend(process.env.RESEND_API_KEY);
  const invoice = await fetchInvoiceDetails(invoiceId); // Function to fetch invoice details
  const customer = await fetchCustomerDetails(invoice.customerId);

  await resend.sendEmail({
    from: '[email protected]',
    to: customer.email,
    subject: `Invoice #${invoice.invoiceNumber}`,
    html: `<h1>Invoice #${invoice.invoiceNumber}</h1><p>Amount: ${invoice.amount}</p>`,
  });
}
import { Resend } from 'resend';

export default async function sendInvoiceEmail(invoiceId) {
  const resend = new Resend(process.env.RESEND_API_KEY);
  const invoice = await fetchInvoiceDetails(invoiceId); // Function to fetch invoice details
  const customer = await fetchCustomerDetails(invoice.customerId);

  await resend.sendEmail({
    from: 'no-reply@invoicingapp.com',
    to: customer.email,
    subject: `Invoice #${invoice.invoiceNumber}`,
    html: `<h1>Invoice #${invoice.invoiceNumber}</h1><p>Amount: ${invoice.amount}</p>`,
  });
}
﻿
9. Bereitstellung auf Vercel
Um die App auf Vercel bereitzustellen, installieren Sie die Vercel CLI und stellen Sie bereit.
Bash
npm install -g vercel
vercel
npm install -g vercel
vercel
﻿
Konfigurieren Sie Umgebungsvariablen für Clerk, Stripe, Resend und Back4App im Vercel-Dashboard vor der Bereitstellung.
10. Fazit
In diesem Tutorial haben wir eine vollständige Rechnungs-App mit Next.js erstellt, Back4App für das Backend integriert, Clerk für die Authentifizierung, Stripe für Zahlungen und Resend für E-Mail-Benachrichtigungen. Wir haben die Benutzer- und Organisationsverwaltung, die Erstellung von Rechnungen, die Zahlungsabwicklung und die Bereitstellung behandelt.
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Erstellung der Ticketing-App mit Next.js, Vercel und Back4App
ALS NÄCHSTES
Tutorial zur Buchung von Besprechungsräumen mit Back4App, Next.js und Vercel