2021/09/24

Next.jsとmicro-cmsをapiで繋いでいい感じのフォームを作る。

@ 酒井悠宇

【Next.js】 microCMSで問い合わせ機能を実装してみた
 API経由でコンテンツを作成できるようになりました

今日はmicroCMSとreact-hook-formを使っていい感じのフォームを作成してみたいと思います。
↑↑の記事見ながら実装していきます。

それではれっつらご！

microCMSの設定

コンテンツの追加

まずはAPI名とエンドポイントを入力し、コンテンツ(API)を追加します。

続いて、POSTメソッドが使えるリスト形式を選択します。

必要なAPIスキーマを設定します。

なお、以下も忘れないように設定しましょう。

POSTリクエストを有効にする（API設定 > HTTPメソッド設定）
APIリファレンスからX-WRITE-API-KEYを作成して控えておく

Next.jsで問い合わせ機能を実装

それではいよいよNext.jsで問い合わせを実装していきます。

問い合わせ用の関数を作成

Next.jsにはAPI Routesという機能があります。
これはNext.jsのプロジェクト内にapiを作成することができるという機能です。
pagesディレクトリ配下のapiディレクトリ内に作成することができ、ファイル構造はそのままエンドポイントになります。

例えば、pagesディレクトリ配下のapiディレクトリにcontact.tsというファイルを作れば、/api/contactがそのままエンドポイントになるということです。

今回はpages/api/contact.tsに以下のように実装しました。

import { NextApiResponse, NextApiRequest } from "next";

//contactの型定義
export type Contact = {
  text: string;
  email: string;
  number: string;
  body: string;
};

// /api/contactが叩かれた時に発火する関数
const contact = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  //POSTを行う際に使用するAPIキー
  const WRITE_API_KEY: string | undefined = process.env.WRITE_API_KEY;

  // APIキーがundefinedなら404ステータスコードを返却する。
  if (typeof WRITE_API_KEY === "undefined") {
    return res.status(404).end();
  }

  //フォームから送信されたデータをPOST
  await fetch(`https://[ここにはmicroCMSのドメインが入ります].microcms.io/api/v1/contact`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      "X-WRITE-API-KEY": WRITE_API_KEY,
    },
    body: JSON.stringify(req.body),
  });
};

export default contact;

そして次にフォームのonSubmitイベントで上のapiを呼び出す関数を実装しました。

  //フォーム送信時に走る非同期関数
  const onSubmit = async (contact: Contact) => {//contactにフォームに入力された値がオブジェクト形式で入ってくる
    console.log(contact);

    // apiを叩く
    await fetch("/api/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      //jsonデータを生成
      body: JSON.stringify(contact),
    });
  };

フォーム自体の実装はreact-hook-formを用いて実装しました。
実装方法は前に記事を書いているので気になる方は見てみてください。

React Hook Formでフォームを実装してみる。

バリデーションとかも簡単に実装できるので便利ですよ！

これでいい感じに問い合わせ機能を実装することができました。
microCMSマジで便利すぎでビビってます。
フォームの送信が完了した後の挙動がまだ実装できていないので、今後はその辺をいい感じに実装して行けたらなと思います。

最後までごらんいただきありがとうございました！