# Next.jsとSendGrid APIでお問い合わせフォームを作る

## 目次
1. はじめに
2. 開発環境の準備
    2.1 必要なツールのインストール
3. SendGrid APIのセットアップ
    3.1 SendGridアカウントの作成
    3.2 APIキーの取得
4. Next.jsプロジェクトの作成
    4.1 プロジェクトの初期設定
    4.2 フォームの構築
5. SendGrid APIとの統合
    5.1 APIリクエストの作成
    5.2 メール送信処理の実装
6. セキュリティとデプロイ
    6.1 環境変数の管理
    6.2 デプロイの準備
7. まとめ

## 1. はじめに
この記事では、Next.jsを使用して簡単なお問い合わせフォームを作成し、SendGrid APIを使用してフォームからの入力をメールで送信する方法について説明します。Node.jsとReact.jsの知識を前提に、ステップバイステップでセットアップしていきます。

## 2. 開発環境の準備

### 2.1 必要なツールのインストール
Next.jsはNode.jsの環境で動作します。まずはNode.jsとnpmがインストールされていることを確認しておきましょう。

![img](/mosaic-code.jpg)

必要であれば、公式ウェブサイトから最新バージョンをダウンロードしてください。

## 3. SendGrid APIのセットアップ

### 3.1 SendGridアカウントの作成
[SendGrid公式サイト](https://sendgrid.com/)にアクセスし、アカウントを作成します。SendGridはメール送信サービスで、簡単にAPIを通じてメールを送れるようにします。

### 3.2 APIキーの取得
次に、SendGridのダッシュボードからAPIキーを生成します。[Settings] > [API Keys]に移動して、[Create API Key]から新しいAPIキーを作成しましょう。

## 4. Next.jsプロジェクトの作成

### 4.1 プロジェクトの初期設定
以下のコマンドでNext.jsの新しいプロジェクトを作成します。

![img](/mosaic-code.jpg)

これでNext.jsの基本テンプレートが作成されます。

### 4.2 フォームの構築
`pages/index.js`に以下のようにフォームを追加します。

![img](/mosaic-code.jpg)

## 5. SendGrid APIとの統合

### 5.1 APIリクエストの作成
新たに`pages/api/sendEmail.js`を作成し、APIリクエストを作成します。このファイルでは、フォームから送信されたデータを取得し、SendGrid APIを呼び出します。

![img](/mosaic-code.jpg)

### 5.2 メール送信処理の実装
`pages/index.js`でフォームの送信ボタンの処理を追加します。

![img](/mosaic-code.jpg)

## 6. セキュリティとデプロイ

### 6.1 環境変数の管理
APIキーなどの機密データを`.env.local`ファイルで管理します。プロジェクトのルートディレクトリに作成し、以下のようにAPIキーを追加します。

![img](/mosaic-code.jpg)

### 6.2 デプロイの準備
フォームとAPIはローカル環境で動作確認した後、好みのPaaS（例えば、VercelやAWSのApp Hosting）にデプロイします。

## 7. まとめ
このガイドでは、Next.jsとSendGridを組み合わせて、お問い合わせフォームを作成する方法を学びました。このように、APIを用いてメール送信などの機能を実装することで、アプリケーションの可能性を大きく広げることができます。他のAPIサービスとも連携して、更に豊かなWeb体験を提供していきましょう。

[circus_marketplace_engineer] [cv:issue_marketplace_engineer]

# Next.jsとSendGrid APIでお問い合わせフォームを作る

## 目次
1. はじめに
2. 開発環境の準備
    2.1 必要なツールのインストール
3. SendGrid APIのセットアップ
    3.1 SendGridアカウントの作成
    3.2 APIキーの取得
4. Next.jsプロジェクトの作成
    4.1 プロジェクトの初期設定
    4.2 フォームの構築
5. SendGrid APIとの統合
    5.1 APIリクエストの作成
    5.2 メール送信処理の実装
6. セキュリティとデプロイ
    6.1 環境変数の管理
    6.2 デプロイの準備
7. まとめ

## 1. はじめに
この記事では、Next.jsを使用して簡単なお問い合わせフォームを作成し、SendGrid APIを使用してフォームからの入力をメールで送信する方法について説明します。Node.jsとReact.jsの知識を前提に、ステップバイステップでセットアップしていきます。

## 2. 開発環境の準備

### 2.1 必要なツールのインストール
Next.jsはNode.jsの環境で動作します。まずはNode.jsとnpmがインストールされていることを確認しておきましょう。

```bash
node -v
npm -v
```

必要であれば、公式ウェブサイトから最新バージョンをダウンロードしてください。

## 3. SendGrid APIのセットアップ

### 3.1 SendGridアカウントの作成
[SendGrid公式サイト](https://sendgrid.com/)にアクセスし、アカウントを作成します。SendGridはメール送信サービスで、簡単にAPIを通じてメールを送れるようにします。

### 3.2 APIキーの取得
次に、SendGridのダッシュボードからAPIキーを生成します。[Settings] > [API Keys]に移動して、[Create API Key]から新しいAPIキーを作成しましょう。

## 4. Next.jsプロジェクトの作成

### 4.1 プロジェクトの初期設定
以下のコマンドでNext.jsの新しいプロジェクトを作成します。

```bash
npx create-next-app contact-form
cd contact-form
```

これでNext.jsの基本テンプレートが作成されます。

### 4.2 フォームの構築
`pages/index.js`に以下のようにフォームを追加します。

```javascript
import React, { useState } from "react";

const ContactForm = () => {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    // ここで後述するAPIリクエストを送信
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </label>
      <label>
        Message:
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          required
        />
      </label>
      <button type="submit">Send</button>
    </form>
  );
};

export default ContactForm;
```

## 5. SendGrid APIとの統合

### 5.1 APIリクエストの作成
新たに`pages/api/sendEmail.js`を作成し、APIリクエストを作成します。このファイルでは、フォームから送信されたデータを取得し、SendGrid APIを呼び出します。

```javascript
import sendgrid from "@sendgrid/mail";

sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

const sendEmail = async (req, res) => {
  if (req.method === "POST") {
    const { email, message } = req.body;

    try {
      await sendgrid.send({
        to: "your-email@example.com",
        from: "no-reply@example.com",
        subject: "Contact Form Submission",
        text: message,
        html: `<p>${message}</p>`,
      });
      res.status(200).json({ success: true });
    } catch (error) {
      res.status(500).json({ success: false, error: error.message });
    }
  } else {
    res.status(405).json({ success: false, message: "Method not allowed" });
  }
};

export default sendEmail;
```

### 5.2 メール送信処理の実装
`pages/index.js`でフォームの送信ボタンの処理を追加します。

```javascript
const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await fetch("/api/sendEmail", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ email, message }),
    });

    if (response.ok) {
      alert("Email sent successfully!");
      setEmail("");
      setMessage("");
    } else {
      alert("Failed to send email.");
    }
  } catch (error) {
    console.error("Error:", error);
  }
};
```

## 6. セキュリティとデプロイ

### 6.1 環境変数の管理
APIキーなどの機密データを`.env.local`ファイルで管理します。プロジェクトのルートディレクトリに作成し、以下のようにAPIキーを追加します。

```
SENDGRID_API_KEY=your_sendgrid_api_key
```

### 6.2 デプロイの準備
フォームとAPIはローカル環境で動作確認した後、好みのPaaS（例えば、VercelやAWSのApp Hosting）にデプロイします。

## 7. まとめ
このガイドでは、Next.jsとSendGridを組み合わせて、お問い合わせフォームを作成する方法を学びました。このように、APIを用いてメール送信などの機能を実装することで、アプリケーションの可能性を大きく広げることができます。他のAPIサービスとも連携して、更に豊かなWeb体験を提供していきましょう。

[circus_marketplace_engineer] [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

Next.jsとSendGrid APIでお問い合わせフォームを作る

目次

続きを読むには単価診断を受けてください（30秒）