NextJS Шаблоны
Учебник по созданию приложения для выставления счетов с Next.js, Vercel и Back4app

26min
В этом учебном пособии мы создадим полное Invoicing App с использованием Next.js в качестве фронтенда, Back4App в качестве бэкенда и дополнительных сервисов, таких как Clerk для аутентификации, Stripe для платежей и Resend для уведомлений по электронной почте. Это руководство проведет вас через настройку аутентификации, управление счетами, обработку платежей и развертывание на Vercel.
1. Предварительные требования
Перед началом убедитесь, что у вас есть следующее:
Учетная запись Back4App (Зарегистрируйтесь здесь)
Учетная запись Clerk (Clerk.io) для аутентификации
Учетная запись Stripe (Stripe.com) для обработки платежей
Учетная запись Resend (Resend.io) для уведомлений по электронной почте
Установленный Node.js и npm (Установка Node.js)
2. Настройка бэкенда (Back4App)
2.1 Создание нового проекта в Back4App
Войдите в Back4App и создайте новый проект.
Перейдите в Data Browser и создайте следующие классы:
2.2 Модели данных (Классы)
2.2.1 Пользователь (Автоматически обрабатывается Clerk)
идентификатор объекта
имя пользователя
электронная почта
2.2.2 Организация
Создайте класс под названием Организация.
Добавьте следующие столбцы:
имя (Строка): Имя организации.
идентификатор владельца (Указатель<_Пользователь>): Указывает на класс Пользователь (создан автоматически Clerk).
участники (Массив<Указатель<_Пользователь>>): Массив пользователей, принадлежащих этой организации.
2.2.3 Клиент
Создайте класс под названием Клиент.
Добавьте эти столбцы:
имя (Строка): Имя клиента.
электронная почта (Строка): Электронная почта клиента.
идентификатор организации (Указатель): Организация, к которой принадлежит этот клиент.
2.2.4 Счет-фактура
Создайте класс под названием Счет-фактура.
Добавьте эти столбцы:
номерСчета (Строка): Уникальный идентификатор счета.
идентификаторКлиента (Указатель): Ссылка на клиента.
идентификаторОрганизации (Указатель): Ссылка на организацию.
сумма (Число): Общая сумма счета.
статус (Строка): Опции включают 'черновик', 'отправлено', 'оплачено' и 'просрочено'.
срокПлатежа (Дата): Дата платежа по счету.
позиции (Массив): Список позиций в счете.
2.2.5 Платеж
Создайте класс под названием Платеж.
Добавьте эти столбцы:
идентификаторСчета (Указатель): Ссылка на связанный счет.
сумма (Число): Сумма платежа.
идентификаторСессииStripe (Строка): Идентификатор сессии Stripe.
статус (Строка): Статус платежа (например, 'ожидание', 'успешно', 'неудачно').
3. Настройка фронтенда (Next.js)
3.1 Создание проекта Next.js
Начните с настройки вашего проекта Next.js с TypeScript, Tailwind CSS и компонентами 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 Настройка Tailwind CSS
Настройте Tailwind, обновив tailwind.config.js и добавив стили в globals.css.
В 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: [],
};
﻿
В styles/globals.css:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.3 Установка Parse SDK и дополнительных сервисов
Установите необходимые зависимости для Parse, Clerk, Stripe и Resend.
Bash
npm install parse @clerk/clerk-next stripe resend
npm install parse @clerk/clerk-next stripe resend
﻿
3.4 Инициализация Parse SDK в Next.js
В pages/_app.tsx, инициализируйте Parse SDK с вашими учетными данными 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;
﻿
Замените 'YOUR_APP_ID' и 'YOUR_JAVASCRIPT_KEY' на ваши учетные данные Back4App.
4. Реализация аутентификации пользователей
4.1 Интеграция Clerk для аутентификации
Настройте Clerk для аутентификации. Перейдите на панель управления Clerk, создайте приложение и получите свои API-ключи. Обновите свой .env.local файл с ключами 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
﻿
Теперь создайте pages/sign-in.tsx и pages/sign-up.tsx для функциональности входа и регистрации, используя компоненты Clerk.
В 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 />;
}
﻿
В 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. Управление организацией и клиентами
5.1 Создание организаций
Пользователи могут создавать организации, которыми они владеют. Создайте страницу pages/organizations/new.tsx для создания новых организаций.
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 Управление клиентами
Создайте страницу управления клиентами pages/customers/new.tsx для добавления новых клиентов.
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. Управление счетами
6.1 Создание счетов
Создайте страницу создания счета pages/invoices/new.tsx для генерации новых счетов.
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 Просмотр счетов
Создайте страницу pages/invoices/index.tsx для просмотра всех счетов с возможностями сортировки и фильтрации.
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. Обработка платежей (Интеграция с Stripe)
7.1 Настройка Stripe Checkout
Для обработки платежей интегрируйте Stripe. В pages/invoices/[id].tsx, реализуйте создание платежной ссылки с использованием 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. Уведомления по электронной почте (Интеграция повторной отправки)
8.1 Отправка счетов по электронной почте
Настройте Resend для отправки счетов по электронной почте клиентам.
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. Развертывание на Vercel
Чтобы развернуть приложение на Vercel, установите Vercel CLI и разверните.
Bash
npm install -g vercel
vercel
npm install -g vercel
vercel
﻿
Настройте переменные окружения для Clerk, Stripe, Resend и Back4App в панели управления Vercel перед развертыванием.
10. Заключение
В этом учебном пособии мы создали полное Invoicing App с использованием Next.js, интегрировали Back4App для бэкенда, Clerk для аутентификации, Stripe для платежей и Resend для уведомлений по электронной почте. Мы рассмотрели управление пользователями и организациями, создание счетов, обработку платежей и развертывание.
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Создание приложения для продажи билетов с использованием Next.js, Vercel и Back4App
Учебное пособие по приложению для бронирования конференц-залов с использованием Back4App, Next.js и Vercel