シェア:
){kind=small}
エムレはNext.jsとReactを中心としたソフトウェア開発者です。プログラミングについて新しいことを学び、他の人がプログラミング言語を学ぶのを助けることに情熱を注いでいる。過去には、Classic ASP、Java、Pythonなど、さまざまなプログラミング言語を試してきました。
Next.jsとVonageでSMS配信の送受信とレシート処理
所要時間：5 分
Vonage SMS API Vonage SMS APIを使うと、REST APIを使って世界中のユーザーとテキストメッセージを送受信できます。このチュートリアルでは、Next.jsでSMS APIを使って、SMSメッセージの送受信と受信処理を行います。 Next.jsは、フルスタックのウェブアプリを作成するためのReactフレームワークです。UI開発にはReact Componentsを使用し、Next.jsを介して追加機能と最適化を組み込んでいます。さらに詳しくお知りになりたい場合は Vonage SMS API ドキュメント.
tldr；デプロイをすぐに始めたい場合は、アプリのすべてのコードを GitHub.
このチュートリアルでは、Git、Next.js、React、JavaScriptの基本的な理解があることを前提としています。始める前に、以下を確認してください：
Vonage APIアカウント- Vonage APIダッシュボードにアクセスし、APIキーとAPIシークレットをご確認ください。
Vonageバーチャル番号- メッセージや電話を送受信するためのバーチャル電話番号をレンタルします。
Node.js18.17以降 - Node.jsはオープンソースのクロスプラットフォームJavaScript実行環境です。
デプロイメント・プラットフォーム ヴェルセル, ネットリファイなど。- 受信したSMSと配送レシートを受け取るURLにWebhookを設定します。こうすることで、SMSを受信し、配送レシートを処理できるようになる。
このチュートリアルの最初のセクションでは、Next.jsを使ってテキストメッセージを送信する方法を探ります。Next.jsとのやりとりには、Vonage SMS APIを使います。Next.jsとVonage SMS APIを使ってSMSを送信するには、以下の手順に従ってください：
Next.jsプロジェクトの新規作成方法
環境変数の宣言方法
インストール方法 Vonage Node.js SDK
検証ライブラリのインストール方法 ゾッド
サーバー専用フォームの作成方法
開発サーバーの実行方法
Vercelへのデプロイ方法
Next.jsアプリを作成するには、以下を実行します：
インストールすると、以下のプロンプトが表示されます：
このチュートリアルでは アプリ・ルーターと JavaScriptを使用しますので、上記と同じ答えを選んでください。プロンプトの後に create-next-appはプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。
APIキーとAPIシークレットを API設定また、バーチャル番号は あなたのNumbersページそして .env.localファイルを作成する：
VONAGE_API_KEY=your-vonage-api-key
VONAGE_API_SECRET=your-api-secret
VONAGE_VIRTUAL_NUMBER=your-virtual-number
サインイン 開発者ダッシュボード.
左側のナビゲーションメニューで Numbers次に Numbersを購入する.
必要な属性を選択し 検索.
このチュートリアルでは、SMS機能だけが必要です。しかし、同じ番号を使って他の音声機能を追加することもできます！
をクリックしてください。 購入ボタンをクリックしてください。
あなたのバーチャルナンバーは、以下のリストに表示されます。 Numbers.
見る バーチャル番号を借りる.
Vonage Node.js SDKを使用します。Next.jsでSMSを送信するのはとても簡単です。
Node.js SDKをインストールするには、以下を実行する：
ZodはTypeScriptファーストのスキーマ宣言・検証ライブラリだ。フォームが送信された後に値をチェックするために使用する。しかし、これは必須ではありません、 必要であればをスキップしても構いません。
ゾッドをインストールするには、以下を実行する：
という新しいフォルダを libという新しいフォルダを作成します。次に send-sms.jsファイルを作成します。 libフォルダを作成します：
"use server";
import { revalidatePath } from "next/cache";
import { Vonage } from "@vonage/server-sdk";依存関係をインポートした後、先にインストールしたVonageノード・ライブラリを初期化します：
const vonage = new Vonage({
apiKey: process.env.VONAGE_API_KEY,
apiSecret: process.env.VONAGE_API_SECRET,
});
const from = process.env.VONAGE_VIRTUAL_NUMBER;次に、Vonageノード・ライブラリを初期化し、次のような非同期関数を作成します。 sendSMS:
export async function sendSMS(prevState, formData) {
try {
const vonage_response = await vonage.sms.send({
to: formData.get("number"),
from,
text: formData.get("text"),
});
revalidatePath("/");
return {
response:
vonage_response.messages[0].status === "0"
? `🎉 Message sent successfully.`
: `There was an error sending the SMS. ${
// prettier-ignore
vonage_response.messages[0].error-text
}`,
};
} catch (e) {
return {
response: `There was an error sending the SMS. The error message: ${e.message}`,
};
}
}SMS API を使用して SMS メッセージを送信するには、Vonage Node js ライブラリの vonage.messages.sendメソッドを使用します。このメソッドは、受信者、送信者、およびコンテンツに関する情報を含むオブジェクトをパラメータとして受け入れます。SMS API には 2 種類のレスポンス (vonage_response) があり、1 つはメッセージ送信、もう 1 つはエラーです。参照 SMS レスポンス.
Message Sent の応答例：
{
"message-count": "1",
"messages": [
{
"to": "447700900000",
"message-id": "aaaaaaaa-bbbb-cccc-dddd-0123456789ab",
"status": "0",
"remaining-balance": "3.14159265",
"message-price": "0.03330000",
"network": "12345",
"client-ref": "my-personal-reference",
"account-ref": "customer1234"
}
]
}エラーに対する応答例：
{
"message-count": "1",
"messages": [
{
"status": "2",
"error-text": "Missing to param"
}
]
}でルートセグメント全体を無効にします。 revalidatePathこれは、特定のパスに対してオンデマンドでキャッシュされたデータを消去することができます。これは値を返しません。参照 revalidatePath.
より高度なサーバーサイドのバリデーションには、Zodライブラリを使用します。これを使う場合 send-sms.jsファイルは次のようになります：
"use server";
import { revalidatePath } from "next/cache";
import { Vonage } from "@vonage/server-sdk";
import { z } from "zod";
const vonage = new Vonage({
apiKey: process.env.VONAGE_API_KEY,
apiSecret: process.env.VONAGE_API_SECRET,
});
const from = process.env.VONAGE_VIRTUAL_NUMBER;
const schema = z.object({
number: z
.string()
.regex(new RegExp(/^\d{10,}$|^(\d{1,4}-)?\d{10,}$/), "Invalid Number!"),
text: z.string().min(1, "Type something, please!").max(140, "Too long text!"),
});
export async function sendSMS(prevState, formData) {
try {
const data = schema.parse({
number: formData.get("number"),
text: formData.get("text"),
});
const vonage_response = await vonage.sms.send({
to: data.number,
from,
text: data.text,
});
revalidatePath("/");
return {
response:
vonage_response.messages[0].status === "0"
? `🎉 Message sent successfully.`
: `There was an error sending the SMS. ${
// prettier-ignore
vonage_response.messages[0].error-text
}`,
};
} catch (e) {
return {
response: `There was an error sending the SMS. The error message: ${e.message}`,
};
}
}UIのために、/appの中に新しい send-form.jsxファイルを作成する：
"use client";
import { sendSMS } from "@/app/lib/send-sms";
import { useFormStatus, useFormState } from "react-dom";
const initialState = {
response: null,
};
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button
type="submit"
aria-disabled={pending}
className="border rounded-md hover:bg-slate-50 p-2 flex justify-center items-center"
>
{pending ? (
<>
<div class="border-gray-300 h-5 w-5 animate-spin rounded-full border-2 border-t-blue-600 mr-2" />
Sending...
</>
) : (
"Send"
)}
</button>
);
}
export function SendForm() {
const [state, formAction] = useFormState(sendSMS, initialState);
return (
<form action={formAction} className="flex flex-col gap-y-2">
<label htmlFor="number">Phone number:</label>
<input
name="number"
id="number"
type="number"
placeholder="909009009099"
autoComplete="off"
className="border rounded p-2"
required
/>
<label htmlFor="text">Message:</label>
<textarea
name="text"
id="text"
rows={4}
cols={40}
placeholder="Hello from Next.js App!"
className="border rounded p-2"
required
/>
<SubmitButton />
<p aria-live="polite">{state?.response}</p>
</form>
);
}フックを使って useFormStatusフックを使うことができます。別のフック useFormStateで、フォームアクションの結果に基づいて状態を更新することができます。
最後に send-form.jsxファイルを page.jsにインポートすることができます。
import { SendForm } from "./send-form";
export default function Home() {
return (
<main className="mx-auto max-w-3xl my-3 p-3 border border-slate-300 shadow rounded-lg divide-y divide-solid">
<header className="flex flex-row p-3 items-center justify-between">
<img src="/vonage.svg" alt="Vonage" />
<h2 className="text-lg font-medium">Send SMS with the Vonage APIs</h2>
</header>
<section className="pt-3">
<SendForm />
</section>
</main>
);
}注意してください：vonage.svgファイルはサンプルリポジトリにあります。
このセクションの最初のステップでは、以下のようなディレクトリを作成した。 vonage-send-sms.では cdというディレクトリを作成した：
cd vonage-send-sms
そして、以下のコマンドを実行する：
npm run dev
このコマンドは、Next.jsアプリケーションの開発サーバーをポート 3000.ホームページを見るには http://localhost:3000をブラウザから開いてください。このように表示されるはずです：
Next.js test form to send SMS
このチュートリアルではVercelを使ってアプリをデプロイしますが、Netlifyを使ってプロジェクトをデプロイすることもできます。Vercelには、GitやVercel CLIなど、プロジェクトをデプロイするためのいくつかのオプションがあります。Vercelでデプロイを作成する最も一般的な方法は、Gitリポジトリにコードをプッシュすることです。無料で使い始めることができます。
GitHubを使い始めるには、次のサイトで無料アカウントを作成してください。 GitHub.comで無料アカウントを作成し、メールアドレスを確認してください。
デプロイの前に、Next.jsアプリケーションをGitHubにアップロードしましょう。リポジトリはみんなと共有することも、非公開にすることもできます。READMEなどのファイルを用意する必要はありません。
GitHub にプッシュするには、以下のコマンドを実行します。 <username>を GitHub のユーザー名に置き換えてください：
git remote add origin https://github.com/<username>/vonage-send-sms.git
git push -u origin mainこの このガイドGitHubにあるこのガイドをチェックしてください。
Vercelを使い始めるには、次のサイトにアクセスしてください。 https://vercel.com/signupにアクセスし、Vercelアカウントを作成します。Continue with GitHubを選択し、登録手続きを行ってください。
Vercel Sign Up Page
vonage-send-smsリポジトリ
VercelにサインアップしてアプリをGitHubにプッシュしたら、次のことができます。 リポジトリをインポートするをVercelにインポートできます。このステップで、あなたのリポジトリ、またはAll Repositoriesへのアクセス権を与える必要があります。ここでできます： https://vercel.com/import/git.
Vercel New Project Page
このステップで作成したサンプルリポジトリを、デプロイボタンで一括デプロイすることもできます。ただし、環境変数キーの定義を忘れないでください。
展開が完了すると、URLが送られてきます。リンクのいずれかをクリックすると、Vonage Send SMSフォームにライブバージョンでアクセスできます。とても簡単です！
アプリをデプロイすると、Vercelはデフォルトでプッシュごとにデプロイします。
一部の国（トルコなど）にSMSを送信するには、バーチャルナンバーがその国特有の規制に準拠している必要があります。 国別の機能と制限をご覧ください。をご覧ください。
SMS APIのリクエストに成功すると、メッセージオブジェクトの配列が送信されます。 0のステータスを持つメッセージ・オブジェクトの配列を送信します。ただし、これは受信者がメッセージを受け取ったことを保証するものではありません。Next.jsアプリで受信通知を受け取るには、次のようにします。 ウェブフックエンドポイントを提供する必要があります。
ウェブフック・エンドポイントの作成
POSTリクエスト用のハンドラを作成する
ハンドラーにレスポンスを追加する
API設定の構成
SMSを受信し、配達受領を処理する。
という新しいフォルダを作成する。 webhook内部 /app.そして、さらにもう1つ、「inside」という名前の新しいフォルダを作成する。 statusを作成する。 webhookフォルダを作成します。その後、新しい route.jsファイルを statusフォルダーの中に新しいファイルを作成する。フォルダ構造は以下のようになるはずだ：
.
└── vonage-send-sms
└── app
├── webhook
│ └── status
│ └── route.js
├── page.js
└── layout.js着信したSMSをキャプチャするのとまったく同じことをするので、次のようにフォルダを作成する。 inboundという名前の route.jsファイルを webhookフォルダを作成します：
.
└── vonage-send-sms
└── app
├── webhook
│ ├── status
│ │ └── route.js
│ └── inbound
│ └── route.js
├── page.js
└── layout.js
にPOSTリクエスト用のハンドラを作成します。 /webhook/statusで配信の受信を処理し /webhook/inboundでSMSメッセージの受信を処理する。そして、リクエストのボディをコンソールにログします：
export async function POST(request) {
const res = await request.json();
console.log("The request from Vonage: ", JSON.stringify(res, null, 2));
}今現在は、メッセージのステータスをログで見ることができ、またメッセージのステータスをデータベースなどに追加することもできます。
Vonageは、あなたがメッセージを受け取っていないとみなし、その後24時間再送し続けます。このように、ウェブフック・エンドポイントは 200 OKまたは 204 No Contentレスポンスを返さなければなりません：
export async function POST(request) {
const res = await request.json();
console.log("The request from Vonage: ", JSON.stringify(res, null, 2));
return new Response("ok", {
status: 200,
});
}
Webhookエンドポイントは、Vercel、Netlify、またはあなた自身のサーバーのいずれかにデプロイできるようになりました。アプリをデプロイしたら、各フィールドに /webhook/inboundと /webhook/statusを追加して各フィールドを埋めてください。 API設定.
Configure SMS API Setting
Vercelで宅配便の受け取りやSMSメッセージの着信を確認するには：
Next.jsアプリを Vercelダッシュボード.
プロジェクト概要に移動し、ログタブを選択します。
ここから、ランタイムログを見たり、フィルターしたり、検索したりすることができる。
Vercel Runtime Logs
Next.jsアプリケーションでSMSメッセージを送信すると、ランタイムログにVonageからのリクエストが表示されます。
Vonageからの返答は次のようになる：
{
"msisdn": "905423247231",
"to": "***9512387",
"network-code": "28603",
"messageId": "4a3cf988-570f-4cdb-95be-179f89c64498",
"price": "0.02380000",
"status": "failed",
"scts": "2311031929",
"err-code": "1",
"api-key": "******",
"message-timestamp": "2023-11-03 19:29:32"
}見る 納品書を理解する.
受信したSMSメッセージがコンソールログにどのように表示されるかを確認するには、携帯電話からVonage番号にSMSメッセージを送信します：
{
"msisdn": "905423247231",
"to": "***9512387",
"messageId": "2B00000018726238",
"text": "Hi! This is test message from Emre!",
"type": "text",
"keyword": "HI!",
"api-key": "******",
"message-timestamp": "2023-11-03 19:55:15"
}見る インバウンドメッセージの解剖.
これで、Vonage SMS APIとNext.jsを使ってSMSメッセージを送受信し、受信通知を受け取る方法がわかりました。受信した SMS メッセージに返信したり、より複雑でインタラクティブな要素を追加したりして、このプロジェクトを拡張することを検討してください。
いつでもお気軽に VonageデベロッパーSlackまたは ツイッターまでお気軽にお問い合わせください。お読みいただきありがとうございました。
この記事が気に入ったら、エムレに連絡を取ってみてください！彼は長い間仕事を探しているんだ :)