figma make で作成したモックをnextに組み込む

figma make とは

プロンプトを与えるのみでデザインを行ってくれるツールです。

figma make の技術スタック

• ビルド環境: Viteベース
• フレームワーク: React + Tailwind CSS
• 出力形式: SPA構成（index.html + hashed JS/CSS）

PJではNext.js + Chakra UIを技術スタックとして採用しているため、このままではfigma make で作成したモックを組み込むことはできません。
そのため、vite buildで生成したhtml、js、cssファイルをpublicに配置し、配信する必要があります。
その後下記のようなmock専用のコンポーネントを作成し、next側に組み込むことに成功しました。

import { headers } from "next/headers";

import fs from "node:fs";
import path from "node:path";

interface MockHtmlRendererProps {
  mockHtmlDirName: string;
}

export default async function MockHtmlRenderer({ mockHtmlDirName }: MockHtmlRendererProps) {
  const headersList = await headers();

  // 不要な文字列を削除してディレクトリ名を正規化
  const normalizedDirName = mockHtmlDirName
    .replace(/^public\/mock\/?/, "") // 先頭のpublic/mockを削除
    .replace(/\/index\.html$/, "") // 末尾の/index.htmlを削除
    .replace(/^\/+|\/+$/g, ""); // 先頭と末尾のスラッシュを削除

  const htmlPath = path.join(process.cwd(), `public/mock/${normalizedDirName}/index.html`);
  const html = fs.readFileSync(htmlPath, "utf8");

  return <div suppressHydrationWarning dangerouslySetInnerHTML={{ __html: html }} />;
}

---

ソースコードについて一部補足を入れておきます。

• suppressHydrationWarningとは何なのか？

  • サーバーサイドとクライアントサイドでレンダリングの結果が異なる際に発生するhydration error を見えなくするもの。
  • 参考:suppressHydrationWarningとは何か

• dangerouslySetInnerHTMLとは何なのか？

  • HTMLをそのままReactのコンポーネントとして扱うオプション。
  • figma make が生成したコード脆弱性が含まれていたとしてもそのままなので注意！
  • 参考:【React】dangerouslySetInnerHTMLの危険性と安全な使用方法