microCMSとSlackでお問合せ機能を実装する

microCMSにお問い合わせをPostして、Slackに通知を送ることができます。

microCMS側の設定

APIの作成

1. お問い合わせを受け取るための新しいAPIを作成を作成します。エンドポイントは任意の文字列です。ここでは 「contact」としています。
2. APIに［リスト形式］を選択します。
3. APIスキーマを設定します。

APIキーの作成

1. 歯車マーク > APIキーから［APIキー管理］に移動します。必要に応じて［＋追加］からAPIを作成してください。対象APIをタップして、次の個別設定画面に進みます。
2. 個別権限の［お問い合わせ］に、POSTを設定します。
3. 右上の［変更］ボタンを押してAPIの設定を完了します。

Next.jsでフォームを作成する

お問合せフォームの作成

1.「src/pages/api/contact/index.ts」を作成します。次のように記述します。

import type { NextApiRequest, NextApiResponse } from "next";
import { createClient } from "microcms-js-sdk";

export const client = createClient({
  apiKey: process.env.PORTFOLIO_API_KEY!,
  serviceDomain: "yoko-portfolio",
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    console.log(req.body);
    await client.create({
      content: req.body,
      endpoint: "contact",
    });
    res.status(200).json("OK");
  } catch (err) {
    console.error(err);
    res.statusCode = 500;
  }
}

2. 「src/pages/contact.tsx」を作成します。

import { NextPage } from "next";
import { AppTitle } from "src/components/atom/appTitle";
import { ContactForm } from "src/components/form";
import { Layout } from "src/layout";

const ContactPage: NextPage = () => {
  return (
    <Layout>
      <AppTitle title="contact" description="お問合せページ" />
      <ContactForm />
    </Layout>
  );
};

export default ContactPage;

3. 「src/components/form.tsx」を作成します。

import { Button, Group, Textarea, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { FC, useState } from "react";
import { Title } from "src/components/atom/title";

export const ContactForm: FC = () => {
  const [sendMessage, setSendMessage] = useState<string>("Need help?");
  const form = useForm({
    initialValues: {
      name: "",
      email: "",
      message: "",
    },

    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : "Invalid email"),
    },
  });

  const onSubmit = async (values: typeof form.values) => {
    try {
      // microCMSに送信
      await fetch("/api/contact", {
        body: JSON.stringify(values),
        headers: {
          Accept: "application/json, text/plain, */*",
          "Content-Type": "application/json",
        },
        method: "POST",
      });
      form.reset();
      setSendMessage("Thank you! We'll be in touch.");
    } catch (error) {
      console.error("Fetch error: ", error);
      alert(JSON.stringify(error));
    }
  };

  return (
    <div className="container mx-auto w-screen py-20 px-3 md:max-w-5xl">
      <Title>Contact</Title>
      <div className="mx-auto max-w-2xl">
        <div className="mb-3 font-bold">{sendMessage}</div>
        <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
          <TextInput
            required
            label="Email"
            placeholder="your@email.com"
            {...form.getInputProps("email")}
            className="mb-3"
          />

          <TextInput
            required
            label="Name"
            placeholder="Taro Yamada"
            {...form.getInputProps("name")}
            className="mb-3"
          />

          <Textarea
            required
            label="Your message"
            placeholder="I want to order your goods"
            {...form.getInputProps("message")}
            className="mb-3"
          />

          <Group position="center" mt="md">
            <Button
              type="submit"
            >
              Send message
            </Button>
          </Group>
        </form>
      </div>
    </div>
  );
};

Slackと連携して通知を受け取る

microCMSにはコンテンツの公開時にSlackのWebhookを使って通知できる機能があります。この機能を使って、お問合せえPOST時に通知を飛ばせます。
👉　Slackに詳しい説明がありますので参照してください。