このオープンソースツールは、単一のプロンプトから全体のウェブサイトをスピンアップすることができます

このチュートリアルは、React 19 と Next.js 15 を使用して自動的にウェブページを生成するためのドライブシステムを作成するための包括的なガイドの最初の部分です。 オープンソース: (https://github.com/aifa-agi/aifa) こちらはロードマップ: Part 1 (You are here): Core architecture deep dive — catch-all routes, the PageHtmlTransformer component, and strongly typed page configs. (あなたはここにいる) Part 2: Advanced page types—automating documentation pages and interactive tutorials. 高度なページタイプ—自動化ドキュメントページとインタラクティブチュートリアル。 Part 3: AI エンジン統合 - 外部モデル(ChatGPT、Claude)と内部の aifa エージェントを接続して継続的で自律的なコンテンツ生成を行います。 ボーナス:ケーススタディ - ユーザー登録とStripe支払いで生産レベルのAI SaaSの展開、収益化、スケーリング。 このステップ-by-step blueprint は、認証および支払いフローを含む独自のエンタープライズ-ready v0 クローンを構築することにより、コンセプトからリリースまで、現実世界のAI 製品 - 完全なソースコードを提供します。 ♪ テクノロジー スタック: React 19 · Next.js 15 · Vercel · Prisma · Stripe · AI SDK · ChatGPT 当社のプラットフォームは、エンタープライズグレードの安定性と血統的なイノベーションを組み合わせています。 React 19 & Next.js 15 with App Router は、sub-100ms レンダリングと真の並列ルートを提供します。 Vercelはゼロダウンタイムの展開とグローバルエッジスケーリングを可能にします。 Prisma & Neonは、タイプの安全で、光速のデータアクセスを確保します。 Stripeは、すぐに、PCIコンプライアンスの支払いをボックスから取り扱います。 AI SDK + ChatGPT レイヤーは生成インテリジェンスで、AIFA Dev Starter は数分で完全な UI、コンテンツモジュール、およびプロトタイプをスピンアップできます。 どのように機能する Prompt: ChatGPT に単一の自然言語リクエストを送信します。 Generate: ページのセクション、メタデータ、およびレイアウトを定義する JSON ベースの PageConfig を受け取ります。 Build: Config ファイルを Next.js アプリに落とし、npm run build を実行してください. Instantly you have a fully styled, SEO-ready page, complete with auth and AI-powered chat. エンタープライズ統合が必要ですか? 高度な自動化、役割ベースのアクセス、スケーラブルなマイクロサービスアーキテクチャのために、次の aifa.dev(https://aifa.dev)で「v0 エンタープライズモード」をオンにします。 エンタープライズ統合が必要ですか? 高度な自動化、役割ベースのアクセス、スケーラブルなマイクロサービスアーキテクチャのために、次の aifa.dev(https://aifa.dev)で「v0 エンタープライズモード」をオンにします。 AI-Powered Site Generatorで誰が勝つ? スタジオ、企業、スタートアップ、フリーランサー The Next-Generation Design Agency: From Mockup to Mass Production in Minutes(次世代デザイン機関:モックアップから数分で大量生産) 静的マッカップだけでなく、スケーラブルなテクノロジーエコシステムを設計する機関を想像してください 独自のコンポーネントライブラリへの単一の事前投資は、1時間あたり50以上の生産レベルのウェブサイトを生成および展開する能力を解除します。 これは、クリエイティブな資本が自動化された実行に出会う新しい運用パラダイムです。そして、ストリップ統合が組み込まれたことで、あなたは最初の日からこの新しいスピードを稼ぐことができます。 Enterprise Deployments: Brand Consistency and Radical Scalability (エンタープライズデプロイメント) クラシックなエンタープライズ用例:全国レストラン・フランチャイズ向けのクロックキーのQRメニューソリューション. You build a master design system for the core user experience—like product cards or menus—just once. This becomes a white-label solution you can deploy to hundreds of franchisees or locations. 各ロケーションは、シンプルなインターフェイスを介してブランドとコンテンツをカスタマイズし、コアのUX、パフォーマンス、およびデザインの整合性は閉じ込められ、一貫しています。 で、 そして、 . radical scalability bulletproof brand consistency unmatched speed-to-market The Core Engine: Our JSON-to-React Transformer Architecture (コアエンジン:私たちのJSON反応トランスフォーマーアーキテクチャ) このシステム全体は、2つの重要なコンポーネントによって動作します: Intelligent Prompt Engineering We use highly-tuned instructions that command the AI to pull battle-tested section templates from a vector database and tailor them to your specific request. The Component Transformer Architecture Our React components are engineered to interpret these JSON configs, instantly transforming them into fully-rendered, interactive pages. ChatGPT や Claude などの外部モデルがコンテンツ生成に取り組む一方で、私たちの独自のトランスフォーマーコンポーネントはシステムのコアエンジンであり、パフォーマンスとデザインの信頼性を保証するために構築した部分です。 AIネイティブドキュメンタリー:このチュートリアルをライブの知識ベースとして使用する 止まる ドキュメンタリースタート ITです。 読書 コマンド このガイドの本当のパワーは、それをカバー-to-カバーで読むことではありません。 どのように機能するか: このドキュメント全体を ChatGPT に送信します。 「カスタムセクションをどのように実装するか?」、「FullScreenWrapperの目的は何ですか?」、「DoublePresentation コンポーネントのコードを教えてください」など、具体的な文脈的質問をしてください。 完全なコードスナップットで正確で生産準備が整った回答を得ましょう。 これは単なるドキュメントではなく、実行可能なプレイブックです。このアプローチを試してみて、2025年のすべての技術文書がAIネイティブである必要がある理由を理解するでしょう。 オリジナルタイトル: Our Philosophy—Consistency Trumps Raw Speed このガイドは、可能な限り最速のAIページジェネレーターを作成するのではありません。v0のようなAIツールは原料生成速度を優先しますが、私たちの方法論はより重要なビジネスメトリックに焦点を当てています。 私たちの主な目標は、あなたのデジタルフットプリント全体を通じて、弾道防御の設計の一貫性と建築的調和を提供することです。 Total Cost of Ownership (TCO) 単一ページの初期生成は少し時間がかかるかもしれませんが、開発、メンテナンス、ブランド管理におけるダウンストリームの節約は指数的に大きいです。 Bulletproof Brand Consistency: AI によって生成されたすべてのページは、あなたの既定の設計システムに自動的に適合します. No rogue components, no off-brand styling. シームレスなユーザーエクスペリエンス: このアーキテクチャは、ユーザーの調和的かつ一貫した旅を確保し、急速に生成されたサイトで共通する不一致を排除します。 著しく減少した再加工: 作成時点で基準を適用することにより、通常、後世代に必要な高価で時間がかかるマニュアル調整を最小限にします。 True Architectural Scalability: 私たちのアプローチは、あなたがスケールするにつれてより効率的になります. The more pages you generate, the greater the returns in speed and consistency. The result isn't just a collection of pages; it's a cohesive, professional-grade digital asset that scales gracefully with minimal maintenance overhead. 原題:Beyond the Basics: Handling Real-World Complexity この初期チュートリアルは、私たちのコアで標準ページを構築することに焦点を当てています。 で、 そして、 しかし、オープンソースのコードベースは、より複雑な要件に対し、高度なオフ・ザ・ボックス・ソリューションを提供しています。 Header Body Footer Advanced, Nested Navigation を備えたドキュメントページ。 Interactive Tutorial Pages with stateful, step-by-step elements. インタラクティブなチュートリアルページ。 当社のアーキテクチャは、拡張性のために設計されています。アニメーションされたプレゼンテーション、リアルタイムデータダッシュボード、または複雑なステータス管理を備えたコンポーネントなどのユニークで高度にインタラクティブな機能には、 これは、システムのコアの整合性を損なうことなく、カスタマイズされた機能を実装する柔軟性を提供します。 Custom Components Your Next Step: Hands-On with Custom Components このシステムを真にマスターするために、あなたの実践的な任務は、新しいカスタムコンポーネントの作成と統合のプロセスを探索することです。 1.1 コンセプト:AIはあなたのブランド管理者であり、コンテンツエンジンではない 現代のデジタルオペレーションにはスピード、ブランドの整合性、市場の柔軟性が必要です。当社のアーキテクチャは、あなたの設計システムを構造化された、インテリジェントな知識ベースとして扱ってこれを達成します。 AI に正確な UI/UX 基準を提供することで、コンテンツ ジェネレータ以上のものとなり、ブランドアイデンティティの究極の管理者となり、ページ作成ライフサイクルのあらゆる段階で一貫性を確保します。 5ステップワークフロー:デザインシステムからSEO最適化ビルドまで Ingest Your Design System: AIの知識ベースに、コンポーネント テンプレートと、それらを視覚的および構造的に実装する方法に関する明確な指示を加え、100%のブランドランディングを確保します。 プロンプトで目標を定義する:ユーザー、プロジェクトマネージャー、または開発者は、望むページまたはその要素を説明する簡単なテキストプロンプトを送信します。 AI Interpretation & Structuring: AI エージェントはリクエストを解析し、セマンティックコンテンツを生成し、知識ベースから適切な事前承認されたテンプレートにインテリジェントにマップします。 Declarative PageConfig を作成する: 選択されたテンプレートに基づいて、システムは強力にタップされた PageConfig を生成します - 最終ページの宣言 JSON 説明です。 Automated Build & Deployment: The config is consumed by our render components during the build process. The output is a production-ready, SEO-optimized page that is visually and technically compliant with your corporate standards. 構成は、構築プロセス中に私たちのレンダリングコンポーネントによって消費されます。 The Business Impact: Drive Conversions and Slash TCO(ビジネス影響:ドライブ変換とスラッシュTCO) Accelerated Go-to-Market: 単一のプロンプトで新しいランディングおよび製品ページを立ち上げ、優れたスピードのために事前承認されたテンプレートを活用します。 Ironclad Brand Integrity: ブランドの一貫性と品質管理は自動化され、新しいページごとにあなたのデザインシステムが完璧に反映されます。 Reduced Manual Overhead & Scalable A/B Testing: 開発者をレイアウトプロセスに巻き込むことなく、ページの変数とA/Bテストコンテンツをスケールするマーケティングチームを強化する。 グローバル・スケール向けに構築:すべてのテキストとUI要素が集中化され、ローカライゼーションと市場適応をシームレスにします。 建築的柔軟性:現代のCI/CDパイプライン、ホスティングプラットフォーム、およびその他のAI駆動ワークフローに完璧に統合するように設計されています。 1.4. Your Roadmap Through This Series (このシリーズを通してあなたのロードマップ) この包括的なチュートリアルでは、私たちはあなたを導きます: コアアーキテクチャの解体:PageHtmlTransformer、Wrapper/FullScreenWrapperシステム、およびセクションコンポーネントがどのように相互作用するかを深く掘り下げる。 レンダリングパイプラインをマスターする:セクションレンダリング、構成入力、およびconfig ファイルと React コンポーネントの関係の論理を理解して、システムを自分で拡張できます。 AI を教える方法を学ぶ:メタデータ、ヘッダー、サッパーのための構造化された指示を作成し、JSX フラグメントとしてボディコンテンツを生成するための仕様を定義する方法を学ぶ。 Pages on Demand:あなたの知識を適用して、AIがあなたのアーキテクチャと設計基準に完全に合致するページを生成するために使用する構成ファイルを作成します。 2.我々のAI駆動アーキテクチャの解剖学 The Anatomy of Our AI-Powered Architecture 私たちのプロジェクトは、スケーラビリティ、メンテナンスおよび開発速度を最大限に高めるために組織されています。We use Next.js 15 App Router conventions, including parallel routes ( )および個人フォルダ( 清潔で強力な構造を作るために。 @right _folder プロジェクトディレクトリ Tree app/@right/ ├── public/ │ ├── (_routing)/ │ │ └── [[...slug]]/ │ │ └── page.tsx # 1. Dynamic Catch-All Route Handler │ └── (_service)/ │ ├── (_config)/ │ │ └── public-pages-config.ts # 6. AI-Generated Page Configurations │ └── (_libs)/ │ └── utils.ts # 7. Configuration Utilities └── (_service)/ ├── (_types) │ └── page-wrapper-types.ts # 5. The TypeScript Data Contract (AI UI) └── (_components)/ └── page-transformer-components/ ├── page-html-transformer.tsx # 2. The Core Page Transformer Engine ├── custom-sections/ # Directory for complex, interactive components ├── wrappers/ │ ├── full-screen-wrapper.tsx # 3. Immersive Full-Screen Wrapper │ └── wrapper.tsx # 4. Standard Content Section Wrapper ├── header-sections-components/ │ ├── header-section.tsx # 8. Standardized Header Component │ ├── page-header-elements.tsx # 9. Atomic Header Elements (H1/H2) │ └── announcement.tsx # 10. Announcement Banner Component ├── body-sections-components/ │ └── body-section.tsx # 12. Flexible Body Content Container └── footer-sections-components/ └── footer-section.tsx # 11. Standardized Footer Component 全画面モード 全画面モード 全画面モード 全画面モード キーコンポーネントパス 1. @/app/@right/public/(_routing)/[[...slug]]/page.tsx 2. @/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer.tsx 3. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx 4. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx 5. @/app/@right/(_service)/(_types)/page-wrapper-types.ts 6. @/app/@right/public/(_service)/(_config)/public-pages-config.ts 7. @/app/@right/public/(_service)/(_libs)/utils.ts 8. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx 9. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx 10. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx 11. @/app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx 12. @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx 全画面モード 全画面モード 全画面モード 全画面モード The Core Component Toolkit: Production-Ready Pages Out of the Box(コアコンポーネントツールキット) 目的 当社の標準コンポーネントライブラリは、強力にタップされた、ブランドに合わせたページを規模で作成するためのエンジニアリングされた基盤を提供します。このコレクションは、当社のシステムのアーキテクチャの柱:ダイナミックルーティング、中央トランスフォーマーエンジン、多様なコンテンツ包装、統一されたヘッダーとフッターセクション、およびそれらを駆動する構成ファイルとデータ契約を含みます。 主な建築原則: Bulletproof UI Consistency: Each component adheres to a unified design system and behavioral patterns, ensuring a seamless and predictable user experience. すべてのコンポーネントは、統一された設計システムと行動パターンを遵守し、シームレスで予測可能なユーザーエクスペリエンスを確保します。 AI-Native by Design: アーキテクチャは自動生産に最適化され、AIは手動の介入なしで複雑なページを構築することができます。 グラウンドアップからSEO最適化:検索エンジン最適化とセマンティックHTMLのためのベストプラクティスは、ボールドされていない。 Type-Safe & Predictable:TypeScriptの厳格な書き込みを活用して、AIとUIの間の信頼性の高いデータ契約を履行し、システムの安定性を確保します。 Modular & Composable: 各コンポーネントは、最大限の再利用性と拡張性のために設計された特定の問題を解決する独立したユニットです。 これらのコンポーネントは、AIによって生成されたすべてのページが視覚的に一貫しているだけでなく、技術的に強力でエンタープライズの準備ができていることを保証するシステムの基盤となっています。 2.1.1 その他 コンポーネント:Universal Catch-All Route for Dynamic URLs [[...slug]]/page.tsx 2.1.1.1 Catch-All Routesの戦略的価値:アジリティと展開速度 catch-all ルートは Next.js で動的ルーティングパターンであり、単一のページコンポーネントが無限の URL セグメントを処理できるようにします。 条約、The パラメータは URL パスのすべての部分を含むマレージになりますが、それがどれほど深く埋め込まれているかにかかわらず。 [[...slug]] slug ビジネス上の観点から、この建築選択は巨大な競争優位性です。 Infinite Nesting and Content Depth: You are no longer constrained by the project's file structure. A URL like /public/category/nike/sneakers/black/12345 is handled by exactly the same component as /public/test. This unlocks the ability to build deeply hierarchical product catalogues, documentation sites, or content libraries without requiring any changes to the code base. プロジェクトのファイル構造によって制限されなくなります。 Frictionless Navigation and Instant Page Launches: New page deployment is as simple as adding its configuration to a central file. The page goes live instantly without creating new components or navigating a complex file system. This uncouples content strategy from engineering cycles, empowering marketing and product teams to move faster. 新しいページの構成要素を作成したり、複雑なファイルシステムを移動したりすることなく、中央ファイルに構成を追加するのと同じように簡単です。 内蔵オートメーション: このアーキテクチャは完全に自動化されたコンテンツエコシステムの基盤です。自動生成されたサイドバーまたはメニューは、ページ構成を読み、ダイナミックにナビゲーションを構築するようにプログラムすることができます。 2.1.1.2 AI アシスタントのダイナミック URL の価値: 無限のコンテンツのスケーラビリティ 今日の競争の激しい環境では、現代のSaaSおよびAIプラットフォームは、ユーザー、管理者、または自動AIエージェントによってイニシアチブされたものであろうと、コンテンツは即時作成と展開のためにアーキテクチャされなければなりません。 Strategic Business Advantages: アーキテクチャ制限を除去:コンテンツの構造と巣の深さに関するすべての制限を除去し、コードの変更を必要とせずにデジタル存在を無限に拡張できます。 Unlocks Unmatched Agility: Any use case complex content hierarchies build. Navigation is driven purely by your business logic, not constrained by a rigid file system. This disconnects your content strategy from engineering cycles, empowering product and marketing teams to execute faster. あなたのコンテンツ戦略をエンジニアリングサイクルから切り離し、製品およびマーケティングチームがより速く実行することを可能にします。 AI-Powered Automation: このアーキテクチャは、AIファーストワールドのために設計されています. It provides a stable foundation for AI agents to autonomously generate, configure, and deploy entire sections of your site, from product catalogues to knowledge bases. このアーキテクチャは、製品カタログから知識ベースに至るまで、AIエージェントが自律的に生成、構成、および展開するための安定した基盤を提供します。 2.1.1.3. Real-World Use Cases at Scale このアーキテクチャは理論的なものではなく、ビジネス成長を推進する高価値で深く巣立ったコンテンツ構造を展開するための試験モデルです。 Turnkey QR Menu Systems: 全国的なレストラン・フランチャイズのためのホワイトラベルソリューションを展開します. 各ロケーションは、ユニークで深くカテゴリ化されたメニュー(例えば、 /public/menu/dallas-tx/dinner/mains/pasta-dishes)を持つことができます。 電子商取引製品カタログ: 無限の変数を含む幅広い製品ラインを即座に立ち上げます。 /public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345 のような URL は、市場の急速な拡張と細かい製品の組織を可能にし、作成と管理が不可欠になります。 企業および教育ポータル:広範な知識ベースまたはチュートリアルプラットフォームを構築し、コンテンツを論理的に組織することができ、ヒエラリキがどれほど深く進む必要があるかにかかわらず(例えば、 /public/tutorials/enterprise-ai/onboarding/module-3/advanced-prompting)。 その核心として、プロセスはエレガントにシンプルで強力なものであり、あらゆるURLパスをダイナミックに相応のページ構成に翻訳し、その後フライトでレンダリングされます。 コンポーネントの主な任務は、 It captures the incoming URL path as an array of segments (e.g., ). Receive the URL: ["category", "nike", "sneakers"] The function proactively reads your file. It informs Next.js of all valid page routes defined in your configuration. For the business, this translates to comprehensive Static Site Generation (SSG), ensuring every page is pre-built for lightning-fast load times and optimal SEO. Generate Static Paths: generateStaticParams public-pages-config.ts export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages(); return pages.map((page: PageConfig) => ({ slug: page.metadata.slug ? page.metadata.slug.slice(1) : [], })); } When a user requests a URL, the component receives the array. It then uses the utility to perform a high-speed lookup against the configuration array (prepending for an accurate match). If a match is found, the configuration is passed to our universal component for rendering. Fetch and Render: slug getPageBySlug "public" PageHtmlTransformer export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]); if (!pageConfig) { return Page not found; } return ; } Because the 任意の長さで検索が直接一致する場合、このシステムは無限の巣の深さを提供し、ルートの衝突のリスクはゼロです。 slugArr 2.1.1.5 主要な機能とそのビジネス影響 generateStaticParams: Drives Performance & SEO by telling Next.js which 2.1.1.7 The Component: The Execution Engine (コンポーネント:エクゼクションエンジン) This component is the engine that brings our AI-powered architecture to life. It's a single, powerful Next.js Server Component that acts as a universal handler for every dynamically generated public page. It is responsible for fetching the correct page configuration based on the URL and orchestrating the final render, ensuring both maximum performance and out-of-the-box SEO compliance. // @/app/@right/public/(_routing)/[[...slug]]/page.tsx

import { PageHtmlTransformer } from "@/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer"; import { getPageBySlug } from "@/app/@right/(_service)/(_config)/pages-config"; import { constructMetadata } from "@/lib/construct-metadata"; import type { PageConfig } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { getAllPublicPages } from "../../(_servise)/(_libs)/get-all-public-pages";

interface Props { params: Promise ; }

export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages();

return pages.map((page: PageConfig) => ({ slug: page.metadata.slug || [], })); }

export async function generateMetadata({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]);

if (!pageConfig) return {}; return constructMetadata(pageConfig.metadata); }

export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const publicPageConfig = getPageBySlug(["public", ...slugArr]);

if (!publicPageConfig) { return Page not found ; }

return ; } 全画面モード 全画面モード 全画面モード 全画面モード 2.1.1.7. The Bottom Line: Catch-All Routes as Your AI Content Engine Catch-all ルートと中央のページ構成を組み合わせると、AI ドライブコンテンツオーケストラのための最大限の柔軟性、拡張性、および目的構築のアーキテクチャが作成されます。 コアの原則はシンプルですが、変換性があります: No new code files, no complex folder structures. The navigation and rendering systems adapt automatically, making this the cornerstone of a truly agile and scalable AI-powered platform. A new page is just a new entry in a configuration file. 2.1.3. FullScreenWrapper vs. Wrapper: Crafting Immersive Full-Screen Experiences 1.3.1 主な目的 The 背景ビデオや画像サポートを備えた完全スクリーンプレゼンテーションを必要とするセクションに特別に設計され、「ヒーロー」セクションの基礎コンテナとして機能し、コンテンツが豊富なメディア要素の上に優雅に覆われています。 FullScreenWrapper 2.3.2 レイアウトアーキテクチャ コンポーネントは、コンテンツが読み取り可能で背景から視覚的に異なることを保証するために、洗練された層構造を使用します。 Technical Highlights: : Guarantees the section fills the entire viewport height, creating a captivating, full-bleed effect. min-h-screen Positioning: Enables precise control for stacking elements. relative z-index / ): Positioned with and to sit behind all other content. Background Elements ( video img absolute z-0 : Uses positioning with to ensure it always appears above the background. Content Container relative z-10 {backgroundElement} // z-0 {children} // Header → Body → Footer Enter fullscreen mode Exit fullscreen mode 2.1.3.3 カスタマイズと拡張性 The is designed for easy customization. You can add complex visual effects directly via the プロット FullScreenWrapper className 全画面モード 全画面モード 全画面モード 全画面モード : Background videos automatically receive an class to improve text readability, but this can be easily overridden. Opacity Control opacity-40 Smooth Transitions: A transition-all duration-500 class is built-in to ensure smooth changes to background properties. スムーズな移行: すべての期間の移行500クラスが組み込まれ、背景属性へのスムーズな変更を保証します。 2.1.3.4 高度なスタイリングと再利用可能なテンプレート When you need section dividers, borders, glow effects, or background blurs, the provides the ideal foundation for implementing these styles. This makes it perfect for creating highly stylized, reusable templates. FullScreenWrapper typescript

Enter fullscreen mode Exit fullscreen mode 1.3.5 コンポーネント // @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx

import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils";

interface FullScreenWrapperProps extends HTMLAttributes { videoUrl?: string; imageUrl?: string; className?: string; children: React.ReactNode; }

export function FullScreenWrapper({ videoUrl, imageUrl, className, children, ...props }: FullScreenWrapperProps) { let backgroundElement: React.ReactNode = null;

if (videoUrl) { backgroundElement = ( ); } else if (imageUrl) { backgroundElement = ( ); }

return ( {backgroundElement} {children} ); } 全画面モード 全画面モード 全画面モード 全画面モード 2.4. Wrapper: The Standard Sectional Container(標準セクションコンテナ) 2.1.4.1. Primary Use Case The is the default, go-to container for the majority of content sections. It's designed to provide standard padding, content centering, and a consistent, predictable layout for informational blocks. Wrapper 2.4.2 構造とスタイル typescript {children} // Header → Body → Footer 全画面モード 全画面モード 全画面モード 全画面モード The component's structure is simple and optimized for performance, relying on a few key Tailwind CSS classes: py-10 lg:py-14:デバイス間の一貫したスペースを確保するための反応型垂直パッドディングを適用します。 : Creates a centered, max-width container with horizontal padding, ensuring content is well-aligned and readable. container mx-auto px-4 : Utilizes the current theme's CSS variable for the background color, ensuring seamless integration with light/dark modes. bg-background 2.1.4.3. Customization Points While minimalist by design, the is a flexible foundation for custom styling via the prop. It's the perfect base for adding: Wrapper className Custom background colors or gradient effects. Borders or dividers between sections. Blur や Glow などの微妙な視覚の強化効果。 2.1.4.4. Building Reusable Templates typescript // Пример для pricing-секций Enter fullscreen mode Exit fullscreen mode When your design calls for a template with unique styling but a standard, centered content structure, is the ideal choice. It provides the structural backbone, allowing you to focus on the specific styles of the template. Wrapper 2.1.4.5. The Component // app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx

import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils";

interface WrapperProps extends HTMLAttributes { className?: string; children: React.ReactNode; }

export function Wrapper({ className, children, ...props }: WrapperProps) { return ( {children} ); } Enter fullscreen mode Exit fullscreen mode 2.1.5. page-wrapper-types.ts: The AI-to-UI TypeScript Contract 2.1.5.1.The Core Contract: Bridging AI Generation and UI Rendering (コア契約:AI生成とUI renderingのブリッジング) The file establishes a formal, strictly-typed contract between our AI content generator and the UI rendering system. This contract is fundamental to our architecture, defining the structure of all possible page components and the rules governing their interactions to ensure seamless integration and predictability. page-wrapper-types.ts 2.1.5.2. SectionType Categories and AI-Driven Generation The AI's operational model is centered around the enum. First, the AI analyzes the available section types defined within this enum. Then, based on the user's request, it strategically selects which sections to assemble for a given page. To facilitate fully autonomous and high-quality content generation, the AI's knowledge base must be populated with comprehensive instructions and diverse examples for each of the 25+ section types. SectionType typescript export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" Enter fullscreen mode Exit fullscreen mode 2.1.5.3 SEO 最適化とメタデータ The インターフェイスは、標準に準拠したメタタグの生成を確保し、これは検索エンジン最適化(SEO)にとって重要です。 この機能は、ページ構成からデータを取得し、それをページに転送します。 このユーティリティは、その代わりによく形成された HTML ヘッダーを構築します。 PageMetadata generateMetadata() constructMetadata() typescript export interface PageMetadata { id: string; // Уникальный идентификатор title: string; // тег для SEO description: string; // для сниппетов image?: string; // Open Graph изображение slug?: string[]; // URL-структура страницы type: SectionType; // Тип основной секции } Enter fullscreen mode Exit fullscreen mode 2.1.5.4. HeaderContentConfig: Managing SEO Hierarchy Managing the heading hierarchy is critical for on-page SEO. THE section is optional. This is an intentional design choice because certain section types may embed / tags directly within their . While this provides flexibility, it introduces a potential risk to UI consistency, which is a primary objective of this architecture. Careful implementation is required to maintain a logical and SEO-friendly document structure. A note of caution: Header H1 H2 bodyContent typescript interface HeaderContentConfig { heading: string; headingLevel?: 1 | 2; // H1/H2 для поисковой иерархии description?: string; showBorder?: boolean; } Enter fullscreen mode Exit fullscreen mode 2.1.5.5. BodySection: Enabling Maximum Design Freedom typescript bodyContent?: React.ReactNode; Enter fullscreen mode Exit fullscreen mode By design, the body of a section is granted complete freedom to implement any layout or design. This architectural choice allows for maximum creative flexibility, enabling the AI to generate rich and varied content. This approach deliberately contrasts with the そして , which are standardized to maintain a consistent look and feel across the entire application. Header Footer typescript interface FooterContentConfig { actions?: { label: string; href: string; variant?: "default" | "secondary" | "outline" | "ghost" | "link"; }[]; } Enter fullscreen mode Exit fullscreen mode 2.1.5.6. FooterContentConfig: A Minimalist Approach フォーターの現在の実装は意図的にミニマリズムです. それはオプションの呼び出し行動ボタンのみをサポートしています. 追加の要素は含まれていません, すべての生成されたページでシンプルさ,速度,および均一性を優先することを決定しました。 2.1.5.7 拡張型定義の原則 To introduce a new , the following steps must be taken: SectionType The AI's knowledge base must be updated with comprehensive instructions and examples for the new section type. Update AI Knowledge: Extend Enum: 新しいタイプは SectionType enum に追加する必要があります。 If the new section requires unique configuration parameters, the corresponding configuration interface must be extended. Expand Interfaces: This process strikes a crucial architectural balance: the and are strictly typed to enforce SEO best practices and UI consistency, while the offers maximum flexibility for innovative, AI-driven design solutions. Header Footer Body 2.1.5.8. Component // app/@right/(_service)/(_types)/page-wrapper-types.ts

export interface MetadataConfig { title?: string; description?: string; }

export interface PageMetadata { id: string; title: string; description: string; image?: string; slug?: string[]; type: SectionType; }

export interface BaseSection { id: string; type: SectionType; className?: string; }

export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; }

export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; }

export type Section = SectionConfig;

export interface PageConfig { metadata: PageMetadata; sections: Section[]; }

export type SlugType = string[]; Enter fullscreen mode Exit fullscreen mode 2.1.5.9. customComponentsAnyTypeData: Supporting Arbitrary Custom Components THE フィールド内 serves as a powerful "escape hatch." It is designed for passing unstructured data to sections that leverage complex or unique custom components that do not conform to our standard interfaces. customComponentsAnyTypeData?: any; SectionConfig To maintain architectural integrity, the type and structure of this data must be rigorously defined and documented . This design choice provides the necessary flexibility to integrate highly interactive, dynamic, and advanced user-facing sections without compromising the core typing contract of the main page architecture. 関連コンポーネント自体の内 2.1.6. public-pages-config.ts: The Public Page and Slug Route Registry 2.1.6.1. Role in System Architecture THE file is an AI-generated registry of all public-facing pages within the application. This configuration is automatically generated by our AI based on system instructions and user prompts. Its structure is directly influenced by the available components in our knowledge base examples and the enumerations within the definitions. public-pages-config.ts SectionType The resulting configuration acts as a bridge, translating the AI's analysis of user requirements into a structure that our page rendering system can interpret and display. 2.1.6.2. When to Use This File-Based Configuration This approach is ideal for: Projects with a limited number of pages (typically 10-15). Websites with static content that requires infrequent updates. Rapid prototyping and Minimum Viable Products (MVPs), allowing for a quick start without database setup. Landing pages with a fixed, predefined structure. When to Transition to a Database: For large-scale production applications, a file-based approach is only practical for a small set of pages. Most scenarios will benefit from storing this information in a database to enable dynamic content management and scalability. 2.6.3 構造構造 typescript export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { /* SEO-заголовки */ }, bodyContent: {}, footerContent: { /* Кнопки действий */ }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; Enter fullscreen mode Exit fullscreen mode 2.1.6.4. Configuration Categorization Principle Placing the configuration file in the directory signifies its role in managing public-facing pages. Key Architectural Decision: public/(_service)/(_config)/ Scaling by Category: Our architecture supports scaling by categorizing configurations, ensuring a clean and organized structure: public-pages-config.ts - for public pages (e.g., landing, about, contact) docs-pages-config.ts - 高度なナビゲーションを備えたドキュメントサイト。 — for administrative dashboards. admin-pages-config.ts — for blog posts and articles. blog-pages-config.ts それぞれのカテゴリは、独自のものを持つように設計されています: 専用設定ファイル 特殊部品の種類 Unique rendering logic. 2.1.6.5. Interaction with the AI Generation System For our AI system, this configuration file serves as: Defining how objects should be formed. A structural template: PageConfig Providing reference values for the generation process. A data example: Enforced by TypeScript for strict type safety. A type validation schema: ワークフローは以下の通りです。 AI は既存の構成ファイルを分析します。 ユーザーのプロンプトに基づいて新しい PageConfig オブジェクトを生成します。 A developer then adds the new configuration to the array. pages システムは自動的に新しいルートを認識し、登録します。 2.1.6.6. Advantages and Limitations Advantages of the File-Based Approach: Easily managed and versioned via Git. Version Control: Benefits from compile-time type safety with TypeScript. Type Safety: No database queries result in faster page loads. Zero Latency: Works seamlessly with static site generation (SSG). Simplified Deployment: Limitations: Lacks dynamic content management capabilities. No Dynamic Updates: Any change necessitates a new build and deployment. Requires Redeployment: Unsuitable for user-generated content. Not for UGC: Becomes difficult to manage beyond 20-30 pages. Scalability Concerns: 2.1.6.7. Component // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts

import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types";

export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; Enter fullscreen mode Exit fullscreen mode 6.8 結論 小規模から中規模のプロジェクトのための実用的なソリューションで、管理の簡単さと機能性のバランスをとることができます。より大規模なアプリケーションでは、より強力なデータベース駆動アーキテクチャへの移行前に優れた出発点として機能します。 public-pages-config.ts 2.1.7. utils.ts: Configuration Utility Functions このモジュールは、ページ構成を管理するためのユーティリティ機能を提供します. It includes two primary functions: , which filters all pages with the "public" prefix for static generation, and , which locates a specific page by an exact, case-sensitive match of its slug array. 特定のページを、そのスラグ・アレイの正確な、ケース・センシティブなマッチに位置づける。 getAllPublicPages() getPageBySlug() // @app/@right/public/(_servise)/(_libs)/utils.ts

import { PageConfig, SlugType, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { PublicPagesConfig } from "../(_config)/public-pages-config";

export function getAllPublicPages(): PageConfig[] { return PublicPagesConfig.pages.filter( (page: PageConfig) => page.metadata.slug?.[0] === "public" ); }

export function getPageBySlug(slug: SlugType): PageConfig | undefined { return PublicPagesConfig.pages.find( (page: PageConfig) => JSON.stringify( page.metadata.slug?.map((s: string) => s.toLowerCase()) ) === JSON.stringify(slug.map((s: string) => s.toLowerCase())) ); } 全画面モード 全画面モード 全画面モード 全画面モード header-section.tsx: 統一セクションヘッダー This standardized component serves as a universal header for all section types, ensuring consistency across the application. It offers optional elements such as an announcement, an H1/H2 heading, and a description. This component plays a crucial role in SEO optimization and maintaining visual consistency for AI-generated pages. // @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx

import React from "react"; import { cn } from "@/lib/utils"; import { PageHeaderDescription, PageHeaderHeading, } from "./page-header-elements";

import { Announcement } from "./announcement"; import { HeaderContentConfig } from "../../../(_types)/page-wrapper-types";

export type HeaderSectionProps = { headerContent: HeaderContentConfig; } & React.HTMLAttributes ;

export function HeaderSection({ headerContent, className, ...props }: HeaderSectionProps) { if (!headerContent) return null;

const { announcement, heading, headingLevel = 1, description, showBorder = false, } = headerContent;

return ( {announcement && ( )} {heading} {description && ( {description} )} ); } Enter fullscreen mode Exit fullscreen mode 2.1.9. header-section.tsx: Unified Section Header (Atomic Components) このセクションでは、ヘッダーを構築するために使用される原子部品を詳細に説明します。 (supporting H1/H2), サブカテゴリ、そして ボタンが付いているので、これらの部品は for dynamic HTML tag generation, ensuring correct SEO hierarchy. PageHeaderHeading PageHeaderDescription PageActions createElement // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx

import { HTMLAttributes, createElement } from "react"; import { cn } from "@/lib/utils";

type HeadingTag = "h1" | "h2";

interface PageHeaderHeadingProps extends HTMLAttributes { level?: 1 | 2; }

function PageHeaderHeading({ className, level = 1, ...props }: PageHeaderHeadingProps) {

const Heading: HeadingTag = level === 1 ? "h1" : "h2"; const h1Classes = "text-2xl sm:text-3xl md:text-6xl lg:text-7xl"; const h2Classes = "text-lg sm:text-xl md:text-3xl lg:text-4xl";

return createElement(Heading, { className: cn( "text-center font-bold leading-tight tracking-tighter font-serif", level === 1 ? h1Classes : h2Classes, className ), ...props, }); }

function PageHeaderDescription({ className, ...props }: HTMLAttributes ) { return ( ); }

function PageActions({ className, ...props }: HTMLAttributes ) { return ( ); }

export { PageActions, PageHeaderDescription, PageHeaderHeading }; Enter fullscreen mode Exit fullscreen mode 2.1.10. announcement.tsx: 広告コンポーネント このインタラクティブなバッジコンポーネントは、発表や通知のために設計されています. It supports navigation, keyboard control, and conditional rendering, automatically hiding when no content is present. It is used to draw attention to important updates or links. このインタラクティブなバッジコンポーネントは、ナビゲーション、キーボードコントロール、および条件表示をサポートし、コンテンツが存在しないときに自動的に隠します。 // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx

"use client";

import { useRouter } from "next/navigation"; import { Badge } from "@/components/ui/badge"; import { ArrowRight } from "lucide-react"; import { cn } from "@/lib/utils";

interface AnnouncementProps { badgeText?: string; descriptionText?: string; href?: string; className?: string; }

export function Announcement({ badgeText, descriptionText, href, className, }: AnnouncementProps) { const router = useRouter();

const handleOnClick = () => { if (href) { router.push(href); } };

// Если нет текста для бейджа, описания или ссылки, возвращаем null if (!badgeText && !descriptionText && !href) { return null; }

return ( { if (e.key === "Enter" || e.key === " ") { handleOnClick(); } }} > {badgeText && ( {badgeText} )} {descriptionText && ( {descriptionText} )} {href && } ); } 全画面モード 全画面モード 全画面モード 全画面モード 2.1.11. footer-section.tsx: Unified Section Actions この標準化されたフォーターコンポーネントにはアクションボタンが含まれています。それはさまざまなスタイリングオプションを持つ複数のボタンをサポートし、すべてのセクションにおけるCall-to-Action(CTA)要素の均一性を確保します。 // @app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx

"use client";

import { useRouter } from "next/navigation"; import type { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { PageActions } from "../header-sections-components/page-header-elements";

interface FooterAction { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }

interface FooterSectionProps extends HTMLAttributes { actions?: FooterAction[]; }

export function FooterSection({ actions, className, ...props }: FooterSectionProps) { const router = useRouter();

if (!actions || actions.length === 0) { return null; }

return ( {actions.map((action) => ( router.push(action.href)} > {action.label} ))} ); } Enter fullscreen mode Exit fullscreen mode 2.1.12. body-section.tsx: Arbitrary Content Container 2.1.12.1. Purpose and Philosophy セクション内の主なコンテンツのための非常に柔軟なコンテナとして機能します。厳格に標準化されたヘッダーおよびフッターコンポーネントとは異なり、 すべての React コンテンツを投稿する完全な自由を提供します。 BodySection BodySection 2.1.12.2 コンテンツ生成の原則 Content for must be generated as plain TSX without using 要素は、すべての要素が拡張された形式で提示される。 Crucially: bodyContent .map() typescript // ✅ bodyContent: ( <> Feature 1 Description 1

Feature 2 Description 2

Feature 3 Description 3

) 全画面モード 全画面モード 全画面モード 全画面モード // ❌ bodyContent: ( {features.map(feature => )} ) Enter fullscreen mode Exit fullscreen mode 2.1.12.3. When to Use Custom Components If a section requires complex logic (state, effects, interactivity), create an independent component and add it to as a separate entity. PageHtmlTransformer typescript // @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx export function BodySection({ children, className, ...props }: BodySectionProps) { const hasChildren = children !== null && children !== undefined && !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === "");

if (!hasChildren) return null;

return ( {children} ); } 全画面モード 全画面モード 全画面モード 全画面モード 2.1.12.4. Component // @app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx

import type { HTMLAttributes, ReactNode } from "react"; import { cn } from "@/lib/utils"; import { SectionType } from "../../../(_types)/page-wrapper-types";

interface BodySectionProps extends HTMLAttributes { children?: ReactNode | null; type: SectionType; }

export function BodySection({ children, className, ...props }: BodySectionProps) { const defaultHeightRem = 0; const hasChildren = children !== null && children !== undefined && // Covers case when children = [] or "" !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === "");

if (!hasChildren && defaultHeightRem) { return ( {/* Empty section with default height */} ); }

if (!hasChildren) { return null; }

return ( {children} ); } Enter fullscreen mode Exit fullscreen mode 12.5 結論 システムの標準化されたアーキテクチャとAI生成の創造的自由の間の橋として機能し、コントロールと柔軟性のバランスをとる。 BodySection 2. Advanced Custom コンポーネント Advanced Custom Componentsは、当社の標準建築パターンの能力を超える複雑でインタラクティブな機能を提供するように設計されています。これらのコンポーネントは、ステータス管理、洗練されたアニメーション、リアルタイムデータ処理、またはユニークなビジネスロジックを必要とするシナリオに留保されています。 When to Use Custom Components: インタラクティブ Elements: Forms with validation, calculators, product configurators. : Complex transitions, parallax effects, automatic sliders. Animated Presentations : Chats, notifications, live data feeds. Real-Time Functionality 適応論理:デスクトップ対モバイルで根本的に異なる行動を持つコンポーネント。 : Non-standard interface elements specific to the project. Unique UI Patterns 建築統合: カスタムコンポーネントは、Integrated in the 区別として statements within a このアプローチにより、テーマやデバイス情報などのシステム全体のコンテキストにアクセスし、共通のCSSクラスやデザイントークンを通じて一貫した見た目と感覚を維持できますが、システムのビジュアル言語に従うにもかかわらず、内部の論理と実装に完全な自由を保ちます。 PageHtmlTransformer case switch 2.2.1 Custom Components を実装するためのガイドライン 2.2.1.1 ウォーキングポリシー : Custom components must be returned directly without being enclosed or 彼らは、彼らのプレゼンテーションの完全なコントロールを確保するために、独自のレイアウト、パッドディング、およびレイアウトを管理する責任があります。 No External Wrappers Wrapper FullScreenWrapper 2.2.1.2 コンポーネント・スコア : カスタムコンポーネントの prop インターフェイスは、コンポーネントファイル自体の上部に宣言する必要があります。 Config セクションのフィールド Local Prop Interfaces customComponentsAnyTypeData 2.1.3 拡大 SectionType セクション : Each custom component requires a unique type to be added to the ENUM IN これは、適切なタイプチェックを確保し、 コンポーネントを正しく識別し、表示するために、トランスフォーマーに表示します。 Add a New Section Type SectionType page-wrapper-types.ts switch typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts // ... export type SectionType ="hero-section" | “new-custom-section”; 全画面モード 全画面モード 全画面モード 全画面モード 2.2.1.4 ageHtmlTransformerの更新ケース Custom case processingA new case is added to the PageHtmlTransformer to handle a custom section type with a direct // В PageHtmlTransformer: case "new-custom-section": return ( ); 全画面モード 全画面モード 全画面モード 全画面モード 2.2.1.5. Custom Config Structure : The following is an example of a page configuration that includes a custom section. All component-specific data is placed within the コンポーネントが要求する構造を有するオブジェクト。 Configuration Structure customComponentsAnyTypeData export const PublicPagesConfig = { pages: [ { metadata: { id: "CIUD", title: "1", description: "2", slug: ["public", "name"], type: "new-custom-section", }, sections: [ { id: "new-custom-section", type: "new-custom-section", customComponentsAnyTypeData: { metaData: { metaTitle: "1", metaDescription: "2", }, customData: { mediaUrl: "/_static/illustrations/3.png", title: "4", description: "5", }, }, } as SectionConfig, ], },

] as PageConfig[], 全画面モード 全画面モード 全画面モード 全画面モード 2.2.2 カスタムコンポーネントの例 2 2 1 DoublePresentation ダブルプレゼン ♪ 2.2.2.1.1 更新コアタイプ まず、新しいセクションタイプを追加します。 エナミー SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts

export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" 全画面モード 全画面モード 全画面モード 全画面モード 2.2.2.1.2 新しいケースを追加する トランスフォーマー トランスフォーマー 次に、相応のものを追加します。 2 THE コンポーネントを作成する。 case PageHtmlTransformer case "double-presentation-section": return ( ); 全画面モード 全画面モード 全画面モード 全画面モード 2.2.2.1.4 コンフィギュレーション 例 以下は、設定方法の例です。 成分 in . DoublePresentation public-pages-config.ts // app/@right/(_service)/(_types)/page-wrapper-types.ts

export interface MetadataConfig { title?: string; description?: string; }

export type CuidString = string;

export interface PageMetadata { id: CuidString; title: string; description: string; image?: string; slug?: string[]; type: SectionType; }

export interface BaseSection { id: string; type: SectionType; className?: string; }

export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; }

export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; }

export type Section = SectionConfig;

export interface PageConfig { metadata: PageMetadata; sections: Section[]; }

export type SlugType = string[]; 全画面モード 全画面モード 全画面モード 全画面モード 2.2.1.5 コンポーネント The Complete Code for the 成分 DoublePresentation // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts

import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types";

export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, { metadata: { id: "interactive-ai", title: "Interactive AI Demo", description: "Demo: DoublePresentation custom case", slug: ["public", "example"], type: "double-presentation-section", },

sections: [ { id: "double-presentation-demo", type: "double-presentation-section", customComponentsAnyTypeData: { metaData: { metaTitle: "Interactive AI: Where Conversation Builds the UI", metaDescription: "Discover what makes AIFA revolutionary...", }, leftItem: { mediaUrl: "/_static/illustrations/ai-chat.png", title: "Ai Artifacts Chatbot", description: "As the AI chatbot speaks, it highlights elements...", }, rightItem: { mediaUrl: "/_static/illustrations/ai-web.png", title: "Related Pages", description: "Click any UI element, and the AI provides instant context...", }, }, } as SectionConfig, ], }, ] as PageConfig[], }; 全画面モード 全画面モード 全画面モード 全画面モード 2 2 1 3 page-wrapper-types.ts トップページ > トップページ Here is the complete 新しいタイプを含むファイルです。 page-wrapper-types.ts // @/app/@right/(_service)/(_components)/page-transformer-components/custom-sections/custom-double-prsentation.tsx

"use client";

import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import Image from "next/image"; import { cn } from "@/lib/utils"; import { useMediaQuery } from "@/hooks/use-media-query";

interface PresentationMeta { metaTitle: string; metaDescription: string; }

interface PresentationItem { mediaUrl: string; title: string; description: string; }

interface DoublePresentationProps { metaData: PresentationMeta; leftItem: PresentationItem; rightItem: PresentationItem; }

export default function DoublePresentation({ metaData, leftItem, rightItem, }: DoublePresentationProps) { const { isMobile } = useMediaQuery();

// Desktop animation state const [activeContainer, setActiveContainer] = useState ( "left" ); const [sliderKey, setSliderKey] = useState(0);

// Desktop auto-switching effect useEffect(() => { // Only run animation cycle on desktop if (isMobile) return;

let sliderTimer: NodeJS.Timeout; let transitionTimer: NodeJS.Timeout;

startAnimationCycle();

return () => { clearTimeout(sliderTimer); clearTimeout(transitionTimer); }; }, [isMobile]);

// Return null while determining screen size if (isMobile === null) { return null; }

// Common CSS classes const metaBlockClass = "text-center max-w-3xl flex flex-col items-center"; const descriptionClass = "mb-12 max-w-xl text-base text-muted-foreground text-center"; const desktopTitleClass = "mb-6 max-w-3xl font-serif font-bold leading-tight md:text-2xl lg:text-4xl"; const desktopDescriptionClass = "mb-12 max-w-xl text-lg text-muted-foreground md:text-xl text-center";

// Mobile card renderer const renderMobileCard = (item: PresentationItem) => ( {item.title} {item.description}

);

// Desktop card renderer const renderDesktopCard = (item: PresentationItem, isActive: boolean) => ( {item.title} <motion.div key={`slider-${item.title}-${sliderKey}`} className={cn( "absolute top-0 left-0 h-full", isActive ? "bg-primary" : "bg-gray-700" )} initial={{ width: 0 }} animate={{ width: isActive ? "100%" : "0%" }} transition={ isActive ? { duration: 9, ease: "linear" } : { duration: 0 } } /> {item.description}

);

// Mobile layout if (isMobile) { return ( {metaData.metaTitle} {metaData.metaDescription}

{renderMobileCard(leftItem)} {renderMobileCard(rightItem)} ); }

// Desktop layout return ( {metaData.metaTitle} {metaData.metaDescription}

{renderDesktopCard(leftItem, activeContainer === "left")} {renderDesktopCard(rightItem, activeContainer === "right")} ); } Enter fullscreen mode Exit fullscreen mode 結論:このドキュメンタリーを最大限に活用する方法 私たちは、ここに提示された指示とコンポーネントは、単一の投稿のために広範囲に見えるかもしれないことを理解しています. あなたはこれが最もエキサイティングな読書ではないと感じるかもしれません,そしてあなたは正しいでしょう. これはエンターテイメントではありません; これは強力なシステムの完全な制御を与えるように設計された詳細な技術ガイドです。 この複雑なシステムの研究をインタラクティブで生産的なプロセスに変えるためには、以下のアプローチをお勧めします。 加速学習のためのAIの活用 被動的に読む代わりに、このドキュメントをAIアシスタントの「脳」として使用してください。 Your Action Plan: この記事の全体の内容を、入門からこのセクションまでコピーしてください。 ChatGPTのシステムプロンプトとして使用してください. これにより、我々が議論しているアーキテクチャの完全な文脈がAIに提供されます。 You can now have a dialogue with an AI that "understands" our rules and conventions. For example: Ask questions about the source code. "Based on the provided documentation, explain how to create a new custom component to display customer testimonials." and ." "Show me a configuration example for a page that uses both DoublePresentation HeroSection この方法は、アプリケーションの原則をより速く理解するのに役立ちます. You can find the full source code for this project on our . GitHub リポジトリ 次は何? この記事では、当社のサイト生成システムの2つの重要な部分の1つを構築しました。 これにより、AI が構成を生成できる自動化されたページ作成のための道を開き、私たちの 美しいインターフェイスに変身します。 a tool that transforms a Config Transformer 私たちのプロジェクトをアクションで観るには、Live Demoを訪問してください。 . aifa.dev トップ > Dev A Glimpse into Future Posts: Part 2: The Magic of Markdown. The next article will focus on the second key technology: generating pages (documentation, tutorials, product pages) from Markdown files. 次の記事は、Markdownファイルからページ(ドキュメント、チュートリアル、製品ページ)を生成するための第二のキーテクノロジーに焦点を当てます。 Part 3: From Config to UI. We will revisit the topic of this article and dive deeper into how a ChatGPT-generated configuration is transformed into React components and how this process can be extended. 私たちはこの記事のテーマを再検討し、ChatGPTによって生成された構成が React コンポーネントにどのように変換されるか、そしてこのプロセスをどのように拡張することができるかを検討します。 次のチュートリアルでは、重要な質問に答えることから始めます: トーナメントしろ! Why was Markdown chosen for content management?