NextJS Templates
Tutorial on Billing App with Next.js, Vercel and Back4app

26min
In questo tutorial, costruiremo un completo Invoicing App utilizzando Next.js come frontend, Back4App come backend, e servizi aggiuntivi come Clerk per l'autenticazione, Stripe per i pagamenti, e Resend per le notifiche email. Questa guida passerà attraverso la configurazione dell'autenticazione, la gestione delle fatture, l'elaborazione dei pagamenti e il deployment su Vercel.
1. Requisiti
Prima di iniziare, assicurati di avere i seguenti:
Un account Back4App (Registrati qui)
Un account Clerk (Clerk.io) per l'autenticazione
Un account Stripe (Stripe.com) per l'elaborazione dei pagamenti
Un account Resend (Resend.io) per le notifiche email
Node.js e npm installati (Installazione di Node.js)
2. Configurazione del Backend (Back4App)
2.1 Crea un Nuovo Progetto in Back4App
Accedi a Back4App e crea un nuovo progetto.
Naviga nel Data Browser e crea le seguenti classi:
2.2 Modelli di Dati (Classi)
2.2.1 Utente (Gestito automaticamente da Clerk)
idOggetto
nomeUtente
email
2.2.2 Organizzazione
Crea una classe chiamata Organizzazione.
Aggiungi le seguenti colonne:
nome (String): Il nome dell'organizzazione.
idProprietario (Puntatore<_User>): Punta alla classe Utente (creata automaticamente da Clerk).
membri (Array<Puntatore<_User>>): Un array di utenti che appartengono a questa organizzazione.
2.2.3 Cliente
Crea una classe chiamata Cliente.
Aggiungi queste colonne:
nome (String): Nome del cliente.
email (String): Email del cliente.
idOrganizzazione (Puntatore): Organizzazione a cui appartiene questo cliente.
2.2.4 Fattura
Crea una classe chiamata Fattura.
Aggiungi queste colonne:
numeroFattura (String): Identificatore unico della fattura.
idCliente (Puntatore): Collega al cliente.
idOrganizzazione (Puntatore): Collega all'organizzazione.
importo (Numero): Importo totale per la fattura.
stato (String): Le opzioni includono 'bozza', 'inviata', 'pagata' e 'scaduta'.
dataScadenza (Data): La data di scadenza della fattura.
articoli (Array): L'elenco degli articoli nella fattura.
2.2.5 Pagamento
Crea una classe chiamata Pagamento.
Aggiungi queste colonne:
idFattura (Puntatore): Collega alla fattura correlata.
importo (Numero): Importo del pagamento.
idSessioneStripe (String): L'ID della sessione Stripe.
stato (String): Stato del pagamento (ad es., 'in attesa', 'riuscito', 'fallito').
3. Configurazione del Frontend (Next.js)
3.1 Crea un Progetto Next.js
Inizia configurando il tuo progetto Next.js con TypeScript, Tailwind CSS e i componenti shadcn/ui.
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 Configura Tailwind CSS
Configura Tailwind aggiornando il tailwind.config.js e aggiungendo gli stili a globals.css.
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 Installa Parse SDK e Servizi Aggiuntivi
Installa le dipendenze necessarie per Parse, Clerk, Stripe e Resend.
Bash
npm install parse @clerk/clerk-next stripe resend
npm install parse @clerk/clerk-next stripe resend
﻿
3.4 Inizializza Parse SDK in Next.js
In pages/_app.tsx, inizializza il Parse SDK con le tue credenziali Back4App:
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;
﻿
Sostituisci 'YOUR_APP_ID' e 'YOUR_JAVASCRIPT_KEY' con le tue credenziali Back4App.
4. Implementazione dell'Autenticazione Utente
4.1 Integrazione di Clerk per l'autenticazione
Imposta Clerk per l'autenticazione. Vai alla dashboard di Clerk, crea un'applicazione e prendi le tue chiavi API. Aggiorna il tuo .env.local file con le chiavi di Clerk.
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
﻿
Ora crea pages/sign-in.tsx e pages/sign-up.tsx per la funzionalità di accesso e registrazione utilizzando i componenti di Clerk.
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. Gestione dell'organizzazione e dei clienti
5.1 Crea Organizzazioni
Gli utenti possono creare organizzazioni di cui sono proprietari. Crea una pagina pages/organizations/new.tsx per creare nuove organizzazioni.
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 Gestire i Clienti
Crea una pagina di gestione dei clienti pages/customers/new.tsx per aggiungere nuovi clienti.
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. Gestione Fatture
6.1 Crea Fatture
Crea una pagina di creazione delle fatture pages/invoices/new.tsx per generare nuove fatture.
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 Visualizzazione Fatture
Crea una pagina pages/invoices/index.tsx per visualizzare tutte le fatture con opzioni di ordinamento e filtraggio.
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. Elaborazione dei Pagamenti (Integrazione Stripe)
7.1 Configurare Stripe Checkout
Per elaborare i pagamenti, integra Stripe. In pages/invoices/[id].tsx, implementa la creazione del link di pagamento utilizzando 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. Notifiche Email (Integrazione di Rinvio)
8.1 Inviare Email di Fattura
Imposta Resend per inviare email di fattura ai clienti.
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. Distribuzione su Vercel
Per distribuire l'app su Vercel, installa il Vercel CLI e distribuisci.
Bash
npm install -g vercel
vercel
npm install -g vercel
vercel
﻿
Configura le variabili d'ambiente per Clerk, Stripe, Resend e Back4App nel dashboard di Vercel prima della distribuzione.
10. Conclusione
In questo tutorial, abbiamo costruito un completo Invoicing App con Next.js, integrato Back4App per il backend, Clerk per l'autenticazione, Stripe per i pagamenti, e Resend per le notifiche email. Abbiamo trattato la gestione degli utenti e delle organizzazioni, la creazione di fatture, l'elaborazione dei pagamenti e la distribuzione.
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Costruisci l'app di biglietteria con Next.js, Vercel e Back4App
AVANTI IL PROSSIMO
Tutorial sull'app di prenotazione delle sale riunioni con Back4App, Next.js e Vercel