Skip to content

README.md

Latest commit

 

History

History
163 lines (111 loc) · 5.02 KB

README.md

File metadata and controls

163 lines (111 loc) · 5.02 KB

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

メール送信機能の設定（Resend）

このプロジェクトは、Resendを使用したお問い合わせフォームのメール送信機能を搭載しています。

Resendの特徴

  • 月3,000通まで無料
  • 高い配信率と信頼性
  • 開発者フレンドリーなAPI
  • 簡単な設定
  • 詳細な分析機能

設定手順

1. Resendアカウントの作成

  1. https://resend.com/signup にアクセス
  2. メールアドレスとパスワードでアカウント作成
  3. または GitHub/Google アカウントでサインアップ

2. API キーの取得

  1. Resendダッシュボードにログイン
  2. 左メニューの「API Keys」をクリック
  3. 「Create API Key」ボタンをクリック
  4. 名前を入力（例：angle-cs-contact-form）
  5. 「Full access」を選択
  6. 「Add」をクリック
  7. 表示されたAPI キー（re_ で始まる文字列）をコピー

3. 環境変数の設定

プロジェクトルートに .env.local ファイルを作成し、以下を設定：

# 必須: メールの送信先アドレス
TO_EMAIL=your-email@example.com

# 必須: Resend API キー
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxxx

# オプション: 送信者メールアドレス（独自ドメイン使用時）
FROM_EMAIL=contact@yourdomain.com

# オプション: ドメイン名
DOMAIN=yourdomain.com

4. ドメイン設定（オプション）

独自ドメインを使用する場合：

  1. Resendダッシュボードで「Domains」をクリック
  2. 「Add Domain」で独自ドメインを追加
  3. DNS設定を行う：
    • SPF レコード: v=spf1 include:_spf.resend.com ~all
    • DKIM レコード: Resendが提供する値を設定
    • DMARC レコード: v=DMARC1; p=none;

Cloudflareでの設定

1. 環境変数の設定

Cloudflare Pagesの管理画面で以下を設定：

  1. プロジェクトの「Settings」→「Environment variables」
  2. 以下の変数を追加：
    • TO_EMAIL: あなたのメールアドレス
    • RESEND_API_KEY: ResendのAPI キー
    • FROM_EMAIL: 送信者アドレス（オプション）
    • DOMAIN: ドメイン名（オプション）

2. ビルド設定

  • Build command: npm run build
  • Build output directory: .next
  • Root directory: /

テスト方法

開発環境でのテスト

  1. 開発サーバーを起動: npm run dev
  2. お問い合わせフォームに入力して送信
  3. コンソールにメール内容が出力されることを確認

本番環境でのテスト

  1. Cloudflare Pagesにデプロイ
  2. 環境変数を設定
  3. お問い合わせフォームからテスト送信
  4. 指定したメールアドレスにメールが届くことを確認

トラブルシューティング

よくある問題

  1. API キーエラー

    • API キーが正しく設定されているか確認
    • re_ で始まる文字列であることを確認

  2. メールが届かない

    • 迷惑メールフォルダを確認
    • FROM_EMAILのドメインが認証済みか確認

  3. 送信エラー

    • Resendダッシュボードのログを確認
    • 環境変数が正しく設定されているか確認

サポート

料金について

  • 無料プラン: 月3,000通まで
  • Pro プラン: $20/月で月50,000通まで
  • 一般的なお問い合わせフォームなら無料プランで十分です

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Cloudflare Pages

このプロジェクトはCloudflare Pagesでのデプロイに最適化されています。

  1. Cloudflare Pagesにプロジェクトを接続
  2. ビルド設定:
    • Build command: npm run build
    • Build output directory: .next
  3. 環境変数を設定
  4. デプロイ

Check out our Next.js deployment documentation for more details.