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에 의해 자동으로 처리됨)
객체 ID
사용자 이름
이메일
2.2.2 조직
다음과 같은 클래스를 생성합니다: 조직.
다음 열을 추가합니다:
이름 (문자열): 조직의 이름.
소유자 ID (Pointer<_User>): 사용자 클래스(Clerk에 의해 자동으로 생성됨)를 가리킵니다.
구성원 (Array<Pointer<_User>>): 이 조직에 속한 사용자 배열.
2.2.3 고객
다음과 같은 클래스를 생성합니다: 고객.
다음 열을 추가합니다:
이름 (문자열): 고객의 이름.
이메일 (문자열): 고객의 이메일.
조직 ID (Pointer): 이 고객이 속한 조직.
2.2.4 청구서
클래스를 생성합니다 청구서.
다음 열을 추가합니다:
invoiceNumber (문자열): 고유 청구서 식별자.
customerId (포인터): 고객에 연결됩니다.
organizationId (포인터): 조직에 연결됩니다.
amount (숫자): 청구서의 총 금액.
status (문자열): 옵션에는 '초안', '전송', '지급', '연체'가 포함됩니다.
dueDate (날짜): 청구서 마감일.
items (배열): 청구서의 항목 목록.
2.2.5 지불
클래스를 생성합니다 지불.
다음 열을 추가합니다:
invoiceId (포인터): 관련 청구서에 연결됩니다.
amount (숫자): 지불 금액.
stripeSessionId (문자열): Stripe 세션의 ID.
status (문자열): 지불 상태 (예: '대기 중', '성공', '실패').
3. 프론트엔드 설정 (Next.js)
3.1 Next.js 프로젝트 생성
TypeScript, Tailwind CSS 및 shadcn/ui 구성 요소로 Next.js 프로젝트를 설정하는 것으로 시작하세요.
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 Next.js에서 Parse SDK 초기화
다음의 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를 통합하세요. 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
﻿
배포 전에 Vercel 대시보드에서 Clerk, Stripe, Resend 및 Back4App의 환경 변수를 구성하십시오.
10. 결론
이 튜토리얼에서는 송장 앱을 Next.js로 구축하고, 백엔드에 Back4App을 통합하며, 인증에 Clerk을 사용하고, 결제에 Stripe을 사용하며, 이메일 알림에 Resend을 사용했습니다. 사용자 및 조직 관리, 송장 생성, 결제 처리 및 배포를 다루었습니다.
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Next.js, Vercel 및 Back4App으로 티켓팅 앱 구축하기
Back4App, Next.js 및 Vercel을 이용한 회의실 예약 앱 튜토리얼