code-log

フロントエンドやサーバーレスの話題中心です

microCMSのPOST APIでNext.jsにお問い合わせ機能を実装してみた

こんにちはかみむらです。microCMSの新しい機能で、POST APIに対応したみたいです。POST機能は開発ロードマップに入っていて、個人的に気になっていました。使い道は色々ありそうですが、microCMSのブログでお問い合わせ機能が作成例として出ていたので、Next.jsにお問い合わせ機能を実装してみます。

ちなみに、Next.js + microCMSの記事は、こちらのQiitaにも書いています。よければ一読してください。

qiita.com

リクエスト制限

POSTリクエストはプランによって、月の制限があります。ブログ執筆時点(2020/2/10)では、Freeプランが100回、Starterプランでは3,000回、Businessプランでは30,000回リクエストが可能です。

リクエスト数はダッシュボードで確認することができます。

f:id:kamimura-dev:20200211075843p:plain

その他、金額などはmicroCMSの公式サイトから確認してください。
microcms.io

コンテンツモデルの作成

まずは、コンテンツモデルを作成していきます。API名をお問い合わせにして、エンドポイントをcontactsにします。

f:id:kamimura-dev:20200210215523p:plain

そして、POST機能を使えるのはリスト形式のみなので、リスト形式を選択します。

f:id:kamimura-dev:20200210182035p:plain

APIスキーマは、email(テキストフィールド)name(テキストフィールド)body(テキストエリア)の3つを作成します。追加したら、完了をクリックしましょう。

f:id:kamimura-dev:20200210182624p:plain

デフォルトでは、POSTリクエストは有効ではありません。なのでAPI設定 >
HTTPメソッドからPOSTを有効にして、変更をクリックしてください。

f:id:kamimura-dev:20200210182801p:plain

POSTリクエストを送るには、microCMSで発行されるキーが必要になります。サービス設定API-KEYからX-WRITE-API-KEYを作成します。新規作成をクリックしてください。これは、後で必要になるので、メモしておいてください。

f:id:kamimura-dev:20200210182942p:plain

これで、microCMS側の設定は終わりです。次にPOSTリクエストするための実装をしていきます。

お問い合わせフォームの作成

ここからは、Next.jsのコードを実際に書いていきます。想定としては、コンタクトページとサクセスページがあって、microCMSへPOSTに成功したらサクセスページに移行します。

実装する前に、先ほど作成したX-WRITE-API-KEYenvファイルで保護します。dotenvをインストールしましょう。

$ yarn add dotenv

そして、アプリケーション内で使うために、next.config.jsを作成します。

next.config.js

require("dotenv").config();

module.exports = {
  env: {
    x_api_key: process.env.X_API_KEY
  }
};

X-WRITE-API-KEYは.envファイルに記述します。

.env

X_API_KEY=your

早速POSTリクエストを送るページを作成しましょう。pagesフォルダ内にcontacts.jsを作成してください。コードの全体像は下記の通りです。POSTリクエストを送るために、axiosをインストールします。https://your.microcms.ioには、自分のURLを入れてください。

$ yarn add axios

pages/contacts.js

import React, { useState } from "react";
import { useRouter } from "next/router";
import axios from "axios";

const Contacts = () => {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [body, setBody] = useState("");

  const handleSubmit = e => {
    e.preventDefault();

    const data = {
      email: email,
      name: name,
      body: body
    };

    axios({
      method: "post",
      url: "https://your.microcms.io/api/v1/contacts",
      data: data,
      headers: {
        "Content-Type": "application/json",
        "X-WRITE-API-KEY": process.env.x_api_key
      }
    })
      .then(() => {
        router.push("/success");
      })
      .catch(err => {
        console.log(err);
      });
  };
  return (
    <div>
      <input
        type="email"
        name="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <input
        type="text"
        name="name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <textarea
        type="text"
        name="body"
        value={body}
        onChange={e => setBody(e.target.value)}
      />
      <button onClick={handleSubmit}>お問い合わせする</button>
    </div>
  );
};

export default Contacts;

ポイントはheaders"X-WRITE-API-KEY"を指定して、リクエストを送ってるところです。作成したキーはprocess.env.x_api_keyで値を取ることができます。

そして、こちらが成功したときのページです。

pages/success.js

const Success = () => (
  <div>成功!!</div>
);

export default Success;

作成したフォームでPOSTリクエストを送ってみましょう。microCMSのダッシュボードにいくと、コンテンツが作成できてることが確認できます。
f:id:kamimura-dev:20200210213625p:plain

最後に

今回はNext.jsにmicroCMSでお問い合わせフォームを作成してみました。POSTリクエストは、さまざまな用途で使えそうですね。今後、活用方法が思いついたら、ブログにアウトプットしていきます。