1. はじめに
今回はFigma makeに作ってもらった画面のバックエンド処理を作ります。
Figma Makeは「見た目8割・実装2割」のコードを出してくるので、
Next.js側で“人間が仕上げる”前提で使うのがコツ。
前回記事：https://qiita.com/m150/items/2edc95063a9272c5b1b3
2. 作りたかったアプリの概要（軽くおさらい）
AIが資格学習計画を自動生成してくれるアプリ
日々の進捗をもとに提案を調整する
React＋Node.js＋AWSで構築予定
https://qiita.com/m150/items/d6f69069ca36a8797039
３. バックエンド処理構築
① Node.js をインストール（環境構築）
node -v
npm -v
② Next.js プロジェクトを作成
今回は Next.js App Router / TypeScript / Tailwind の構成。
npx create-next-app@latest studycoach
質問に対して以下を選ぶ：
• TypeScript → Yes
• ESLint → Yes
• Tailwind CSS → Yes
• src/ フォルダ → Yes
• App Router（recommended）→ Yes
• import alias → Yes（@/）**
③ プロジェクト起動確認
cd studycoach
npm run dev
http://localhost:3000 にアクセスして動けばOK。
④ Figma to Code の準備
Figma AI Export は shadcn UI・Radix UI を使用した構成。
Next.js ではそのまま動かないため、以下の依存パッケージを入れる。
⑤ 必要パッケージのインストール
npm install @radix-ui/react-progress @radix-ui/react-checkbox @radix-ui/react-slot
npm install class-variance-authority tailwind-merge lucide-react
⑥Figmaから持ってきたsrcフォルダをローカル同フォルダへ配置する
⑦import aliasの修正（Figmaそのままだと動かない）
Figmaは @/src/components/... で export してくるが、
Next.js は @/components/... が正しい
⑧Figmaの壊れた文字コードを修正
Figma Makeの仕様で、日本語の一部が壊れることがある
⑨コンポーネントのexportの直し
Figmaはdefault exportを付けてなかったりする。
⑩onNavigateの補完（戻るボタン・タブ遷移）
Figmaは onNavigate() を呼んでくるので、それをpage.tsxで定義してないと動かない。
/src/app/page.tsx で以下を追加：
'use client';
import { useState } from 'react';
import Dashboard from '@/components/Dashboard';
import CalendarView from '@/components/CalendarView';
import DailyReport from '@/components/DailyReport';
import GoalSetting from '@/components/GoalSetting';
export default function Page() {
const [page, setPage] = useState('home');
return (
<>
{page === 'home' && <Dashboard onNavigate={setPage} />}
{page === 'calendar' && <CalendarView onBack={() => setPage('home')} />}
{page === 'report' && <DailyReport onBack={() => setPage('home')} />}
{page === 'goal' && <GoalSetting onComplete={() => setPage('home')} />}
</>
);
}
⑫テーブル作成
DynamoDBを使用。
Next.js API Routesでの構成
/api/goals
学習計画の保存・取得
/api/reports
日報の保存・一覧取得
/api/feedback
日報＋計画を元に AI コメント生成
UI → API → DynamoDB / OpenAI → UI
という単純な流れ。
⑪AIコメント生成プロンプト
AIには以下をまとめて渡す。
・今日の日報（やったこと）
・学習時間・完了タスク数
・当日の計画（テーマ・予定タスク）
計画との差分（できた / できなかった）
次にやると良いことを1〜2個コメントして
「それっぽい応援」ではなく、
ちゃんと進捗を見てる感を出すのが狙い。
生成AIはOpenAIのAPIを使用。
1800円分課金して、開発期間無邪気につかってもまだの余力あり。