こんにちは、bani24884と申します。「爆速ホームページ」というNext.jsとMicroCMSを使ったテンプレートを個人開発しています。今回は、MicroCMSの公式テンプレートが既に存在するにも関わらず、なぜ似たようなものを作ったのかについてお話しします。

背景：MicroCMSの公式テンプレート

MicroCMSのOrganizationは、nextjs-simple-corporate-site-templateというリポジトリを公開しています。これはNext.js App Routerを使用したコーポレートサイトのテンプレートです。

なぜ新しいテンプレートを作ったのか？

公式テンプレートは素晴らしいものですが、個人的に感じた課題を改善したいと考えました。以下が、私が改善した4つのポイントです：

1. デザインの「薄さ」を追求

公式テンプレートは非常にクリーンで洗練されたデザインです。しかし、テンプレートとしては「デザインされすぎている」と感じました。

私が目指したのは：

将来の拡張性を阻害しないシンプルさ
ユーザーが自分なりにカスタマイズしやすい「薄さ」
スターティングポイントとして使いやすいデザイン

「爆速ホームページ」では、Hero画像や特徴紹介の3カラムレイアウトなど、ユーザーが自由にアレンジしやすい簡素なデザインと実装を採用しています。

2. フォーム実装の簡素化

公式テンプレートではHubspotを使用していますが、新たなサービスの導入は避けたいユーザーもいると考えました（自分がそうでした）。

「爆速ホームページ」では：

MicroCMSのコンテンツAPIを直接利用
お問い合わせフォームの内容をMicroCMSに直接POST
使用するサービスを減らし、シンプルさを向上

以下のようなserver actionsでフォームを送信しています。

actions.ts

'use server'; 

import { createContact } from "@/lib/microcms";
import { z } from "zod";

export type ContactFormState =
  | { status: 'success' }
  | { status: 'error'; fieldErrors: Record<string, string[] | undefined> }
  | { status: 'idle' };

const contactFormSchema = z.object({
  name: z.string().min(1, "名前を入力して下さい"),
  email: z.string().email("正しいメールアドレスを入力して下さい"),
  message: z.string().min(1, "メッセージを入力して下さい"),
})

export const submitContactForm = async (prevState: ContactFormState, formData: FormData): Promise<ContactFormState> => {
  try {
    const data = {
      name: formData.get("name") as string,
      email: formData.get("email") as string,
      message: formData.get("message") as string,
    }

    const validatedData = contactFormSchema.safeParse(data);
    
    if (!validatedData.success) {
      // エラー時にエラーステータス＆エラーメッセージを返却
      return {
        status: 'error',
        fieldErrors: validatedData.error.flatten().fieldErrors,
      };
    }

    await createContact(validatedData.data);
    
    return { status: 'success'};
  } catch (error) {
    console.error('Failed to submit contact form:', error);
    return { status: 'error', fieldErrors: {} };
  }
};

3. On-demand Revalidateの採用

公式テンプレートではTime-based Revalidate（60秒）を使用していますが、開発時の体験を向上させるため、On-demand Revalidateを採用しました。

MicroCMSのコンテンツ更新時にWebhook経由でキャッシュを再検証
コンテンツの即時反映が可能に

以下のようなroute handlerを用意して、コンテンツ更新時にキャッシュを再検証しています。

app/api/revalidate/route.ts

import { revalidateTag } from "next/cache"
import { NextRequest, NextResponse } from "next/server"


export async function POST(request: NextRequest) {
  const tag = request.nextUrl.searchParams.get("tag")

  if (!tag)
    return NextResponse.json({ message: "No tag provided" }, { status: 400 })

  revalidateTag(tag)

  return NextResponse.json({ revalidated: true, now: Date.now() })
}

4. TailwindCSSの採用

公式テンプレートではCSS Modulesが使用されていますが、個人的な好みとNext.jsの最近のトレンドを考慮し、TailwindCSSを採用しました。

まとめ

以上の4点を改善した「爆速ホームページ」テンプレートをリリースしました。既存のテンプレートの良さを活かしつつ、より使いやすく、カスタマイズしやすいものを目指しました。

ご興味のある方は、ぜひチェックしてみてください。皆様のフィードバックをお待ちしています！