NextJSテンプレート
Next.js、Vercel、および Back4app を使った請求書アプリのチュートリアル

25min
このチュートリアルでは、完全な 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にログインして新しいプロジェクトを作成します。
データブラウザに移動し、以下のクラスを作成します:
2.2 データモデル (クラス)
2.2.1 ユーザー (Clerkによって自動的に処理されます)
オブジェクトID
ユーザー名
メール
2.2.2 組織
「Organization」というクラスを作成します。
次の列を追加します:
名前 (String): 組織の名前。
ownerId (Pointer<_User>): 「User」クラスを指します（Clerkによって自動的に作成されます）。
メンバー (Array<Pointer<_User>>): この組織に属するユーザーの配列。
2.2.3 顧客
「Customer」というクラスを作成します。
次の列を追加します:
名前 (String): 顧客の名前。
メール (String): 顧客のメール。
organizationId (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キーを取得します。Clerkキーで .env.local ファイルを更新します。
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
﻿
次に、Clerkコンポーネントを使用して、サインインおよびサインアップ機能のために pages/sign-in.tsx と pages/sign-up.tsx を作成します。
次に、 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を使用した会議室予約アプリのチュートリアル