{post.title}
{post.excerpt}
| col.sortable && handleSort(col.key)}
className={`px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${
col.sortable ? 'cursor-pointer hover:bg-gray-100' : ''
}`}
>
{col.label}
{col.sortable && (
|
))}
|---|
| {col.render ? col.render(row[col.key], row) : String(row[col.key])} | ))}
{filteredData.length} 件中 {(currentPage - 1) * pageSize + 1} -{' '} {Math.min(currentPage * pageSize, filteredData.length)} 件を表示
| リソース | {actions.map((action) => ({action.label} | ))}
|---|---|
| {resource} | {actions.map((action) => (handleToggle(resource, action.key)} className="w-4 h-4 text-blue-600" /> | ))}
Thank you for signing up...
' }) }); } ); export const { GET, POST, PUT } = serve(inngest, [sendWelcomeEmail]); ``` このフェーズでは、**ユーザー行動の可視化**と**高速なA/Bテスト実施**が最重要です。PostHogの機能フラグを使えば、コードデプロイなしで新機能のロールアウト率を調整できます。 **PMF判断のための主要指標(KPIターゲット)** この段階では、「どこを改善すればPMFに近づくか」を判断するために以下の数字を追います。 * **リテンション率(最重要)**: * **Day 7 Retention > 40%** を目指す。(ユーザーの定着度) * **NPS (Net Promoter Score)**: * **> 50** がPMFの目安。「友人にこのプロダクトを勧めますか?」への回答スコア。 * **エンゲージメント(利用頻度)**: * 全ユーザーの **30%以上** がコア機能を週3回以上利用している状態(パワーユーザー化)。 ```typescript // 使用例 trackCriticalEvent('core_feature_used', { feature: 'document_generation', userId: user.id, timestamp: Date.now() }); ``` この段階では、「どの機能がユーザーに刺さっているか」を定量的に把握することが最重要です。データドリブンな意思決定により、ピボット判断の精度が格段に向上します。 ### フェーズ3: PMF達成後の成長期(1,000〜10,000ユーザー) **このフェーズの目標:** スケーラビリティとパフォーマンスを強化。チーム拡大に対応したアーキテクチャへ進化。 **技術選定の最優先事項:** - **Scalability**: 10倍のトラフィック増加に耐える - **Performance**: レスポンスタイム < 200ms - **Team Scalability**: 5〜10名のチームで並行開発可能 **推奨技術スタック(段階的移行):** **推奨技術スタック(成長期への段階的移行)** | カテゴリ | 推奨技術 | 変更点と理由 | | :--- | :--- | :--- | | **Hosting** | **Vercel Pro** ($20/mo) | チームメンバー増加に伴う権限管理と、より高いリソース制限への対応。 | | **Search** | **Algolia** / **Meilisearch** | 全文検索機能をPostgreSQLから専用エンジンへ分離し、検索速度を向上。 | | **Database** | **Supabase Team** / **AWS RDS** | 負荷分散のためRead Replica(参照用DB)を導入し、読み取り性能をスケール。 | | **Cache** | **Redis Cluster** | キャッシュ容量の拡大と可用性の向上。 | | **Monitoring** | **Datadog** / **New Relic** | スロークエリやN+1問題を特定するためのAPM(Application Performance Monitoring)導入。 | | **Security** | **Cloudflare WAF** | DDoS攻撃や不正アクセスへの対策強化。 | **段階的移行の実装例:** ```typescript // データベースRead Replicaの導入 // lib/db.ts import { createClient } from '@supabase/supabase-js'; // 書き込み用(Primary) export const supabasePrimary = createClient( process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_KEY! ); // 読み取り用(Read Replica) export const supabaseReadReplica = createClient( process.env.SUPABASE_READ_REPLICA_URL!, process.env.SUPABASE_SERVICE_KEY! ); // 使用例 export async function getUserProfile(userId: string) { // 読み取り専用クエリはReplicaから const { data } = await supabaseReadReplica .from('profiles') .select('*') .eq('id', userId) .single(); return data; } export async function updateUserProfile(userId: string, updates: any) { // 書き込みはPrimaryへ const { data } = await supabasePrimary .from('profiles') .update(updates) .eq('id', userId) .select() .single(); return data; } ``` この段階では、**アーキテクチャの大規模な変更ではなく、ボトルネックの特定と部分的な最適化**を進めます。Read Replicaの導入、CDNの活用、検索エンジンの分離など、既存構成を活かしながら段階的に強化します。 **パフォーマンス最適化の実例:** ```typescript // app/products/[id]/page.tsx - ISR (Incremental Static Regeneration) 活用 export const revalidate = 3600; // 1時間ごとに再生成 export async function generateStaticParams() { const products = await getPopularProducts(); return products.map((product) => ({ id: product.id, })); } export default async function ProductPage({ params }: { params: { id: string } }) { const product = await getProduct(params.id); return ({post.excerpt}
Count: {count}
チャートを読み込み中...
, ssr: false // クライアント側でのみレンダリング }); export default function AnalyticsPage() { return (