🖼️

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

に公開
Figma
Next.js
tech

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 }} />;
}

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

Discussion