Ovaj tutorial je prvi dio sveobuhvatnog vodiča za stvaranje pogonskog sistema za automatsko generiranje web stranica pomoću React 19 i Next.js 15. Otvoreni izvor: (https://github.com/aifa-agi/aifa) Uslovi korišćenja Ovo je roadmap: Deo 1 (Vi ste ovde): Osnovna arhitektura duboko ronjenje – uhvatite sve rute, komponentu PageHtmlTransformer i konfiguracije stranica koje su snažno tipkovane. Dio 2: Napredni tipovi stranica – automatizovane stranice dokumentacije i interaktivni vodiči. Dio 3: integracija AI motora – povezivanje vanjskih modela (ChatGPT, Claude) i našeg internog agenta Aifa za kontinuiranu, autonomnu generaciju sadržaja. Bonus: studija slučaja – ugradnja, monetizacija i skaliranje AI SaaS-a razine proizvodnje uz registraciju korisnika i plaćanja Stripe-om. Ovaj korak po korak plan vas vodi kroz izgradnju vlastitog klona koji je spreman za preduzeće, kompletnog s autentifikacijom i tokovima plaćanja. Realni AI proizvod od koncepta do lansiranja – pun izvorni kod dostupan na . Korišćenje Tehnologija Stack: React 19 · Next.js 15 · Vercel · Prisma · Stripe · AI SDK · ChatGPT Naša platforma kombinuje stabilnost poduzeća sa inovativnim inovacijama: React 19 i Next.js 15 sa App Routerom pružaju pod-100ms renderove i prave paralelne rute. Vercel omogućava implementacije sa nultim vremenom zatvaranja i globalno skaliranje prednosti. Prisma & Neon osigurava tip-bezbedan, munja brz pristup podacima. Stripe obrađuje instant, PCI-kompatibilna plaćanja izvan kutije. AI SDK + ChatGPT sloj u generativnoj inteligenciji, tako da AIFA Dev Starter može spin up kompletan UI, module sadržaja i prototipe u nekoliko minuta - kompletno sa ugrađenom autentifikacijom i višejezičnom AI chat. Kako funkcioniše Prompt: Pošaljite jedan zahtev za prirodni jezik ChatGPT-u. Generirajte: Primite PageConfig koji se temelji na JSON-u koji definira odjeljke, metapodatke i raspored vaše stranice. Izgradite: Spustite konfig datoteku u aplikaciju Next.js i pokrenite npm run build. Odmah imate potpuno stilizovanu, SEO-spremnu stranicu, kompletnu sa auth i AI-powered chatom. Potrebna vam je integracija preduzeća? Jednostavno prebacite na naš „v0 Korporativni način“ u [u nadolazećem aifa.dev(https://aifa.dev) za naprednu automatizaciju, pristup zasnovan na ulogama i arhitekturu skalabilnih microservices. Potrebna je integracija preduzeća? Jednostavno prebacite na naš „v0 Korporativni način“ u narednom [aifa.dev ( ) za naprednu automatizaciju, pristup zasnovan na ulogama i arhitekturu skalabilnih mikroslužbi. https://aifa.dev Ko pobeđuje sa AI-powered Site Generator? Studije, preduzeća, startupe i freelancere Next-Generation Design Agency: Od mockupa do masovne proizvodnje u nekoliko minuta Imagine an agency that architects scalable tech ecosystems, not just static mockups. A single upfront investment in a proprietary component library unlocks the ability to generate and deploy 50+ production-grade websites per hour. Ovo nije znanstvena fantastika.To je nova operativna paradigma u kojoj kreativni kapital susreće automatizovano izvršenje.I sa integriranom Stripe integracijom, možete monetizovati ovu novu brzinu od prvog dana. Poduzetničke implementacije: dosljednost marke i radikalna skalabilnost Klasičan slučaj poslovne upotrebe: rešenje QR menija na ključ za nacionalnu franšizu restorana. Izgradite master dizajn sistem za osnovno korisničko iskustvo – kao što su kartice proizvoda ili meniji – samo jednom. Svaka lokacija prilagođava svoj branding i sadržaj putem jednostavnog sučelja, dok su ključni UX, performanse i integritet dizajna i dalje zaključani i dosljedni. U pitanju je , and . radical scalability bulletproof brand consistency unmatched speed-to-market Osnovni motor: Naša JSON-to-React Transformer arhitektura Cijeli ovaj sistem pokreće dve ključne komponente: 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. Dok vanjski modeli kao što su ChatGPT i Claude upravljaju generacijom sadržaja, naše vlastite komponente transformatora su osnovni motor sustava – dio koji smo izgradili kako bismo zajamčili performanse i vernost dizajna. AI-Native dokumentacija: Koristite ovaj tutorial kao živu bazu znanja zaustavljanje Dokumentacija - Početak To je. čitanje Zapovjedništvo Prava moć ovog priručnika nije u čitanju pokrivenosti. On je dizajniran da bude privatna baza znanja stručnjaka vašeg projekta. Kako funkcioniše: Pošaljite ceo ovaj dokument u ChatGPT. Postavite specifična, kontekstualna pitanja: "Kako implementiram prilagođeni odjeljak?", "Šta je svrha FullScreenWrapper?", "Pokaži mi kod za komponentu DoublePresentation". Dobijte precizne odgovore spremne za proizvodnju uz kompletan snippet koda. Pokušajte ovaj pristup i razumjet ćete zašto sva tehnička dokumentacija 2025. treba da bude AI-nativna. Uvod: Naša filozofija – dosljednost Trumps Raw brzina Ovaj vodič nije o stvaranju najbržeg mogućeg AI generatora stranica. Dok AI alate kao što je v0 daju prioritet brzinama sirove generacije, naša metodologija se fokusira na kritičniju poslovnu metriku: Naš primarni cilj je pružiti konzistentnost dizajna i arhitektonsku harmoniju na čitavom vašem digitalnom otisku. Total Cost of Ownership (TCO) Iako početna generacija jedne stranice može potrajati malo duže, uštede u razvoju, održavanju i upravljanju brendom su eksponencijalne. Bulletproof Brand Consistency: Svaka stranica generisana AI-om automatski je u skladu sa vašim uspostavljenim sistemom dizajna. Bezuslovno korisničko iskustvo: Arhitektura osigurava harmonično i kohezivno putovanje za korisnika, eliminirajući neusklađenosti koje su uobičajene u brzo generisanim sajtovima. Drastično smanjena obrada: Uvođenjem standarda u trenutku stvaranja, minimiziramo skupe i vremenski zahtjevne ručne prilagodbe koje su obično potrebne za post-generaciju. Prava arhitektonska skalabilnost: Naš pristup postaje efikasniji dok se skalirate. Što više stranica generirate, veće su povratne informacije u brzini i dosljednosti. The result isn't just a collection of pages; it's a cohesive, professional-grade digital asset that scales gracefully with minimal maintenance overhead. Iznad osnova: rješavanje realnih složenosti Ovaj početni tutorial se fokusira na izgradnju standardnih stranica sa našim jezgrom U pitanju je i Međutim, baza kodova otvorenog koda pruža napredna, van kutije rešenja za složenije zahtjeve: Header Body Footer Stranice za dokumentaciju sa naprednom, ugrađenom navigacijom. Interaktivne tutorske stranice sa statusnim, korak po korak elementima. Za jedinstvene, visoko interaktivne funkcije – kao što su animirane prezentacije, tablice podataka u realnom vremenu ili komponente sa složenim upravljanjem stanjem – možete ubrizgati To vam daje fleksibilnost da implementirate prilagođene funkcionalnosti bez kompromisa s osnovnim integritetom sistema. Custom Components Your Next Step: Hands-On with Custom Components Da biste zaista savladali ovaj sistem, vaš praktični zadatak je da istražite proces stvaranja i integracije nove prilagođene komponente. Koncept: AI kao vaš brand steward, a ne samo sadržaj motor Moderne digitalne operacije zahtijevaju brzinu, integritet marke i tržišnu agilnost. Naša arhitektura to postiže tretiranjem vašeg dizajnerskog sistema kao strukturirane, inteligentne baze znanja. Formalizovane, prethodno odobrene definicije za svaki odjeljak koji je kritičan za marku (Hero, CTA, FAQ, Features, itd.) unose AI. Hranjenjem AI vaših točnih UI / UX standarda, on postaje više od generatora sadržaja - postaje konačni čuvar vašeg brand identiteta, primjenjujući dosljednost u svakoj fazi životnog ciklusa kreiranja stranice. Pet koraka toka posla: od dizajnerskog sistema do SEO-optimizovanog izgradnje Ingest Your Design System: Mi učitamo bazu znanja AI-a sa vašim predlošcima komponenti i eksplicitnim uputama o tome kako ih implementirati vizualno i strukturno, osiguravajući 100% usklađenost marke. Definicija cilja sa promptom: Korisnik, projektni menadžer ili programer šalje jednostavan tekst koji opisuje željenu stranicu ili njezine elemente. AI tumačenje i strukturiranje: AI agent analizira zahtjev, generira semantički sadržaj i inteligentno ga mapira na odgovarajuće, unaprijed odobrene predloške iz baze znanja. Generirajte deklarativni PageConfig: Na temelju odabranih predložaka, sistem izlazi snažno tipkovani PageConfig – deklarativni JSON opis završne stranice. Automatizovana izgradnja i implementacija: Konfiguracija je konzumirana od strane naših komponenti za renderiranje tokom procesa izgradnje. Izlazak je proizvodna, SEO optimizovana stranica koja je vizualno i tehnički u skladu sa vašim korporativnim standardima. Poslovni uticaj: Drive konverzije i slash TCO Ubrzani odlazak na tržište: Pokrenite nove ciljne stranice i stranice proizvoda pomoću jednog uputstva, koristeći unaprijed odobrene predloške za neusporedivu brzinu. Ironclad Brand Integrity: Brand konzistencija i kontrola kvalitete su automatizovani, osiguravajući da svaka nova stranica savršeno odražava vaš dizajn sistem. Reduced Manual Overhead & Scalable A/B Testing: Omogućite marketinškim timovima da skaliraju varijacije stranica i A/B test sadržaja bez uključivanja programera u proces postavljanja. Izgrađen za globalnu skalu: Svi tekstovi i elementi korisničkog interfejsa su centralizirani, čineći lokalizaciju i prilagođavanje tržišta glatkim. Fleksibilnost arhitekture: Dizajniran je tako da se besprijekorno integrira u moderne CI/CD kanale, hosting platforme i druge tokove rada zasnovane na AI-u. 1.4. Vaša putovnica kroz ovu seriju U ovom sveobuhvatnom tutorial, mi ćemo vas voditi kroz: Dekonstrukcija Core arhitekture: duboko uronite u PageHtmlTransformer, sistem Wrapper/FullScreenWrapper i kako komponente odeljka interagiraju. Uspostavljanje Rendering Pipeline: Razumite logiku iza prikazivanja odeljka, tipkanja konfiguracija i odnosa između konfig datoteka i React komponenti, tako da možete sami proširiti sistem. Naučite kako da instruirate AI: Naučite kako da kreirate strukturirane upute za metapodatke, glave i noge i definirate specifikacije za generisanje sadržaja tijela kao JSX fragmenta. Apply your knowledge to create the files that the AI uses to generate pages that are fully compliant with your architecture and design standards. Generating Pages on Demand: config Anatomija naše AI-powered arhitekture Naš projekt je organizovan kako bi se povećala skalabilnost, održivost i brzina razvoja. Koristimo Next.js 15 konvencija App Router, uključujući paralelne rute ( ) i privatne fascikle ( ), kako bi se stvorila čista i snažna struktura. @right _folder Drvo direktora projekata 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 Ulaz u režim punog ekrana Izlaz u režim punog ekrana Ključne komponente putovanja 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 Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.1. alat za osnovne komponente: stranice spremne za proizvodnju izvan kutije Svrha Naša standardna biblioteka komponenti pruža inženjersku osnovu za stvaranje snažno tipiranih, brand-aligned stranica u skali. Ova kolekcija sadrži arhitektonske stupove našeg sistema: dinamičko usmjeravanje, centralni transformatorski motor, svestran sadržaj ambalaže, ujedinjene glave i noge odjeljke, i konfiguracijske datoteke i ugovore podataka koji ih pokreću. Osnovni arhitektonski principi: Konsistencija Bulletproof UI: Svaka komponenta se pridržava jedinstvenog dizajnerskog sistema i ponašanja, osiguravajući besprijekorno i predvidljivo korisničko iskustvo. AI-Native by Design: Arhitektura je optimizovana za autonomnu generaciju, omogućujući AI da gradi složene stranice bez ručne intervencije. SEO-optimizovano od temelja: Najbolje prakse za optimizaciju pretraživača i semantički HTML se prave, a ne prigušuju. Tip-Safe & Predictable: Koristimo strogo tipkanje TypeScript-a kako bismo osigurali pouzdan ugovor o podacima između AI i korisničkog interfejsa, osiguravajući stabilnost sistema. Modular & Composable: Svaka komponenta je samostalna jedinica koja rešava specifičan problem, dizajniran za maksimalnu ponovnu upotrebu i proširenost. Zajedno, ove komponente čine temelj sustava, garantujući da svaka stranica generisana AI-om nije samo vizualno kohezivna već i tehnički robusna i spremna za poduzetništvo. 2.1.1 U vezi sa Komponenta: Universal Catch-All Route za dinamičke URL-ove [[...slug]]/page.tsx 2.1.1.1. Strateška vrijednost Catch-All ruta: agilnost i brzina raspoređivanja A catch-all route is a dynamic routing pattern in Next.js that allows a single page component to handle an infinite number of URL segments. By using the Konvencija o parametar postaje niz koji sadrži svaki deo URL staze, bez obzira koliko je duboko ugrađen. [[...slug]] slug Iz poslovne perspektive, ovaj arhitektonski izbor predstavlja ogromnu konkurentsku prednost. Neograničeno nestanje i dubina sadržaja: Vi više niste ograničeni strukturom datoteke projekta. URL kao što je /public/category/nike/sneakers/black/12345 upravlja istom komponentom kao i /public/test. Bez trljanja navigacija i Instant Page Launches: Ugradnja nove stranice je jednako jednostavna kao i dodavanje njegove konfiguracije u središnju datoteku. stranica ide uživo odmah bez stvaranja novih komponenti ili navigacije u složenom datotečnom sistemu. Ugrađena automatizacija: Ova arhitektura je osnova za potpuno automatizovani ekosistem sadržaja. Auto-generirani sidebar ili izbornik može biti programiran da pročita konfiguracije stranica i dinamično izgradi navigaciju. Kada dodate novu konfiguraciju stranice, navigacija se automatski ažurira, osiguravajući dosljedno korisničko iskustvo uz nula ručnog napora. 2.1.1.2. Vrijednost dinamičkih URL-ova za AI asistente: beskonačna skalabilnost sadržaja U današnjem konkurentnom okruženju, moderne platforme SaaS i AI zahtijevaju agilnost za generiranje novih stranica na putu. Bilo da je inicijativan od strane korisnika, administratora ili autonomnog AI agenta, sadržaj mora biti arhitektonizovan za trenutno stvaranje i implementaciju. Naša arhitektura usmjeravanja je motor koji pokreće ovu sposobnost. Strategic Business Advantages: Eliminiše arhitektonske ograničenja: uklanja sva ograničenja na strukturu sadržaja i dubinu gnijezda, omogućujući vašu digitalnu prisutnost da se skali beskonačno bez potrebe za promjenama koda. Unlocks Unmatched Agility: Izgradite složene hijerarhije sadržaja za bilo koji slučaj upotrebe. Navigacija je pokrenuta isključivo vašom poslovnom logikom, a ne ograničenom rigidnim sistemom datoteka. Omogućava AI-powered automatizaciju: Ova arhitektura je dizajnirana za AI-first svet. pruža stabilnu osnovu za AI agente da autonomno generiraju, konfigurišu i implementiraju čitave sekcije vašeg sajta, od kataloga proizvoda do baza znanja. 2.1.1.3. Real-World Use Cases at Scale Ova arhitektura nije teorijska; to je model testiran u borbi za uvođenje visokokvalitetnih, duboko zaglavljenih struktura sadržaja koji pokreću rast poslovanja: Turnkey QR Menu Systems: Rasporedite rešenje sa bijelim etiketama za nacionalnu franšizu restorana. Svaka lokacija može imati jedinstveni, duboko kategorizovani izbornik (npr. /public/menu/dallas-tx/dinner/mains/pasta-dishes), sve uz održavanje savršene konzistencije brenda i integriteta UX. E-trgovinske kataloge proizvoda: Pokrenite opsežne linije proizvoda s beskonačnim varijacijama odmah. URL kao što je /public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345 postaje trivijalan za stvaranje i upravljanje, što omogućava brzo širenje tržišta i granularnu organizaciju proizvoda. Korporativni i obrazovni portali: Izgradite ogromne baze znanja ili platforme za obuku na kojima se sadržaj može organizovati logički, bez obzira na to koliko duboko hijerarhija treba da ide (npr. /public/tutorials/enterprise-ai/onboarding/module-3/advanced-prompting). #### 2.1.1.4. Kako to funkcioniše: Engine of On-Demand Content U svom srcu, proces je elegantno jednostavan, ali moćan: dinamički prevodi bilo koji URL put u odgovarajuću konfiguraciju stranice, koja se zatim prikazuje na letenje. Glavni zadaci komponente su: 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 ; } Zato što je can be of any length and the lookup is a direct match, this system provides infinite nesting depth with zero risk of route collisions. slugArr 2.1.5. Ključne funkcije i njihov poslovni uticaj generateStaticParams: Pokreće performanse i SEO tako što će reći Next.js koji 2.1.1.7. The Component: The Execution Engine Ova komponenta je motor koji donosi našu AI-powered arhitekturu u život. To je jedan, moćan Next.js Server Komponenta koja djeluje kao univerzalni upravljač za svaku dinamički generiranu javnu stranicu. To je odgovoran za preuzimanje ispravnu konfiguraciju stranice na osnovu URL-a i orkestriranje konačni rendering, osiguravajući i maksimalne performanse i van-of-the-box SEO usklađenosti. // @/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<{ slug?: string[] }>; } 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 <div>Page not found</div>; } return <PageHtmlTransformer data={publicPageConfig} />; } Ulaz u režim punog ekrana Izlaz u režim punog ekrana Bottom Line: Catch-All Routes kao vaš AI Engine sadržaja Combining catch-all routes with a centralized page configuration creates an architecture that is maximally flexible, extensible, and purpose-built for AI-driven content orchestration. This approach is friendly to both developers and AI agents, creating a seamless workflow from concept to deployment. Osnovni princip je jednostavan, ali transformativan: 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 doživljaji punog ekrana 2.1.3.1 Osnovni ciljevi Naši is specifically engineered for sections that require an immersive, full-screen presentation with background video or image support. It serves as the foundational container for "hero" sections, where content is elegantly overlaid on top of rich media elements. FullScreenWrapper 2.1.3.2 Uređena arhitektura The component uses a sophisticated layered structure to ensure content remains legible and visually distinct from the background. 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 <section className="relative flex min-h-screen flex-col py-10 lg:py-14 bg-background"> {backgroundElement} // z-0 <div className="relative z-10 flex flex-col flex-1"> {children} // Header → Body → Footer </div> </section> Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.1.3.3 Prilagođavanje i proširenost Naši is designed for easy customization. You can add complex visual effects directly via the prop. FullScreenWrapper className <FullScreenWrapper className="bg-gradient-to-br from-blue-900 to-purple-900"> Enter fullscreen mode Exit fullscreen mode : Background videos automatically receive an class to improve text readability, but this can be easily overridden. Opacity Control opacity-40 Glatke tranzicije: Ugrađena je tranzicija svih trajanja klase 500 kako bi se osigurale glatke promene u svojstvima pozadine. 2.1.3.4. Advanced Styling and Reusable Templates Kada su vam potrebni odjeljci odjeljka, granice, efekti sjaja ili zamagljenost pozadine, provides the ideal foundation for implementing these styles. This makes it perfect for creating highly stylized, reusable templates. FullScreenWrapper typescript <FullScreenWrapper className="border-t-4 border-gradient bg-blur-effect"> Enter fullscreen mode Exit fullscreen mode 2.1.3.5 Sastavni deo // @/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<HTMLDivElement> { 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 = ( <video className="absolute inset-0 size-full object-cover z-0 opacity-40 transition-all duration-500" autoPlay loop muted playsInline src={videoUrl} /> ); } else if (imageUrl) { backgroundElement = ( <img className="absolute inset-0 size-full object-cover z-0" src={imageUrl || "/placeholder.svg"} alt="Background" /> ); } return ( <section className={cn( "relative flex min-h-screen flex-col py-10 lg:py-14 bg-background", className )} {...props} > {backgroundElement} <div className="relative z-10 flex flex-col flex-1">{children}</div> </section> ); } Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.1.4 Wrapper: Standardni sekcijski kontejneri 2.1.4.1. Primary Use Case Naši je podrazumevani, go-to kontejner za većinu odeljaka sadržaja. Dizajniran je da pruži standardno podnošenje, središte sadržaja i dosljedan, predvidljiv raspored za informacijske blokove. Wrapper 2.1.4.2. Structure and Styling typescript <section className="py-10 lg:py-14 bg-background"> <div className="container mx-auto px-4"> {children} // Header → Body → Footer </div> </section> Enter fullscreen mode Exit fullscreen mode Struktura komponente je jednostavna i optimizovana za performanse, oslanjajući se na nekoliko ključnih Tailwind CSS klasa: py-10 lg:py-14: Primjenjuje odgovorno vertikalno podnošenje za dosljedno razmakavanje između uređaja. : 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 Točke prilagođavanja Dok je minimalistički po dizajnu, je fleksibilna osnova za custom styling preko prop. It's the perfect base for adding: Wrapper className Custom background colors or gradient effects. Borders or dividers between sections. Subtle visual enhancements like blur or glow effects. 2.1.4.4. Building Reusable Templates typescript // Пример для pricing-секций <Wrapper className="bg-gradient-to-br from-green-50 to-green-100 border-2 border-green-200"> <HeaderSection /> <PricingTable /> <FooterSection /> </Wrapper> Enter fullscreen mode Exit fullscreen mode When your design calls for a template with unique styling but a standard, centered content structure, je idealan izbor. pruža strukturalnu kralježnicu, omogućujući vam da se usredotočite na specifične stilove predloška. Wrapper 4.1 Sastavni deo // app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; interface WrapperProps extends HTMLAttributes<HTMLDivElement> { className?: string; children: React.ReactNode; } export function Wrapper({ className, children, ...props }: WrapperProps) { return ( <section className={cn("py-10 lg:py-14 bg-background", className)} {...props} > <div className="container mx-auto px-4">{children}</div> </section> ); } 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 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 optimizacija i metapodatci The Interfejs osigurava standardno sukladnu generaciju meta oznaka, što je ključno za optimizaciju za pretraživače (SEO). function. This function retrieves data from the page configuration and passes it to the utility, which in turn constructs well-formed HTML headers. PageMetadata generateMetadata() constructMetadata() typescript export interface PageMetadata { id: string; // Уникальный идентификатор title: string; // <title> тег для SEO description: string; // <meta description> для сниппетов image?: string; // Open Graph изображение slug?: string[]; // URL-структура страницы type: SectionType; // Тип основной секции } Enter fullscreen mode Exit fullscreen mode 2.1.5.4. HeaderContentConfig: Managing SEO Hierarchy Upravljanje hijerarhijom naslova je ključno za on-page SEO. The section is optional. This is an intentional design choice because certain section types may embed / tags directly within their Iako to pruža fleksibilnost, uvodi potencijalni rizik za UI dosljednost, što je primarni cilj ove arhitekture. A note of caution: Header H1 H2 bodyContent typescript interface HeaderContentConfig { heading: string; headingLevel?: 1 | 2; // H1/H2 для поисковой иерархии description?: string; showBorder?: boolean; } Ulaz u režim punog ekrana Izlaz u režim punog ekrana 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 i , 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 Trenutačna implementacija podnožnika je namjerno minimalistička. Podržava samo opcionalne dugmad poziva na akciju. Ne uključuju se dodatni elementi, odluka o prioritetu jednostavnosti, brzine i ujednačenosti na svim generisanim stranicama. 2.1.5.7. Principles for Extending Type Definitions Uvođenje novog , moraju se preduzeti sledeći koraci: SectionType The AI's knowledge base must be updated with comprehensive instructions and examples for the new section type. Update AI Knowledge: Proširite Enum: Novi tip se mora dodati u 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 strogo tipkovane kako bi se primjenjivale najbolje prakse SEO-a i dosljednost UI-ja, dok 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 type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section"; 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: Podržavanje proizvoljnih prilagođenih komponenti Naši field within On je dizajniran za prenošenje nestrukturiranih podataka na odjeljke koji iskorištavaju složene ili jedinstvene prilagođene komponente koje se ne uklapaju u naše standardne interfejse. 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. U okviru same obične komponente 2.1.6. public-pages-config.ts: The Public Page and Slug Route Registry 2.1.6.1 Uloga u arhitekturi sistema Naši datoteka je AI generisan registar svih javnih stranica unutar aplikacije. Ova konfiguracija se automatski generira od strane naše AI na osnovu uputa sistema i korisničkih uputa. Njegova struktura je izravno pod utjecajem dostupnih komponenti u našim primerima baze znanja i na popisima unutar Definicije public-pages-config.ts SectionType Rezultirajuća konfiguracija djeluje kao most, prevodeći AI analizu korisničkih zahteva u strukturu koju naš sistem za renderiranje stranica može tumačiti i prikazati. 2.1.6.2. When to Use This File-Based Configuration Ovaj pristup je idealan za: 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: Za velike aplikacije proizvodnje, pristup zasnovan na datotekama je praktičan samo za mali skup stranica.Većina scenarija će imati koristi od pohrane ovih informacija u bazi podataka kako bi se omogućilo dinamičko upravljanje sadržajem i skalabilnost. 2.1.6.3 Struktura konfiguracije 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 Načelo kategorizacije konfiguracije 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 – za javne stranice (npr. slijetanje, oko, kontakt). — for documentation sites with advanced navigation. docs-pages-config.ts admin-pages-config.ts – za administrativne nadzorne ploče. — for blog posts and articles. blog-pages-config.ts Each category is designed to have its own: Dedicated configuration file. Specialized section types. 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: Radni tok je kako slijedi: AI analizira postojeće konfiguracijske datoteke. It generates a new object based on the user's prompt. PageConfig Programer zatim dodaje novu konfiguraciju u raspon stranica. The system automatically recognizes and registers the new routes. 2.1.6.6 Prednosti i ograničenja Advantages of the File-Based Approach: Kontrola verzija: Jednostavno upravljanje i verziju preko Git. Bezbednost tipa: Prednosti bezbednosti tipa kompilacije s TypeScript-om. No database queries result in faster page loads. Zero Latency: Works seamlessly with static site generation (SSG). Simplified Deployment: Limitations: Nema dinamičkih ažuriranja: Nedostaju mogućnosti dinamičkog upravljanja sadržajem. 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[], }; Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.1.6.8. Conclusion is a practical solution for small to medium-sized projects, offering a balance between ease of management and functionality. For larger-scale applications, it serves as an excellent starting point before transitioning to a more robust, database-driven architecture. public-pages-config.ts 2.1.7. utils.ts: Configuration Utility Functions This module provides utility functions for managing page configurations. It includes two primary functions: , koji filtrira sve stranice sa "javnim" prefiksom za statičku generaciju, i , 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())) ); } Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.1.8. header-section.tsx: Ujedinjeni glava odeljka Ova standardizovana komponenta služi kao univerzalni naslov za sve tipove odeljaka, osiguravajući dosljednost širom aplikacije. nudi opcionalne elemente kao što su oglas, naslov H1/H2 i opis. Ova komponenta igra ključnu ulogu u SEO optimizaciji i održavanju vizualne dosljednosti za AI generirane stranice. // @/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<HTMLDivElement>; export function HeaderSection({ headerContent, className, ...props }: HeaderSectionProps) { if (!headerContent) return null; const { announcement, heading, headingLevel = 1, description, showBorder = false, } = headerContent; return ( <section className={cn( showBorder && "border-t-4 border-b-4 border-primary", className )} {...props} > <div className="container mx-auto px-4"> <div className="flex flex-col items-center gap-1 py-8 md:py-10 lg:py-12"> {announcement && ( <Announcement badgeText={announcement.badgeText} descriptionText={announcement.descriptionText} href={announcement.href} /> )} <PageHeaderHeading level={headingLevel}>{heading}</PageHeaderHeading> {description && ( <PageHeaderDescription>{description}</PageHeaderDescription> )} </div> </div> </section> ); } Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.1.9. header-section.tsx: Unified Section Header (Atomske komponente) Ovaj odeljak detaljno opisuje atomske komponente koje se koriste za izgradnju glava: (supporting H1/H2), for subheadings, and za postavljanje dugmad. Te komponente za dinamičnu generaciju HTML tagova, osiguravajući ispravnu SEO hijerarhiju. 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<HTMLHeadingElement> { 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<HTMLParagraphElement>) { return ( <p className={cn( "max-w-2xl text-balance text-center text-base font-light text-muted-foreground sm:text-lg", className )} {...props} /> ); } function PageActions({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return ( <div className={cn( "flex w-full items-center justify-center gap-2 pt-2", className )} {...props} /> ); } export { PageActions, PageHeaderDescription, PageHeaderHeading }; Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.1.10. announcement.tsx: Announcement Component Ova interaktivna komponenta oznake dizajnirana je za najave i obaveštenja. Podržava navigaciju, kontrolu tipkovnice i uslovno prikazivanje, automatski skrivajući kada nema sadržaja. Koristi se za skretanje pažnje na važne ažuriranja ili veze. // @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 ( <div className={cn( "flex cursor-pointer items-center gap-2 rounded-full border border-primary bg-muted px-3 py-1 text-sm transition-colors hover:bg-muted/80", className )} onClick={handleOnClick} role="link" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { handleOnClick(); } }} > {badgeText && ( <Badge variant="secondary" className="text-xs"> {badgeText} </Badge> )} {descriptionText && ( <span className="text-muted-foreground">{descriptionText}</span> )} {href && <ArrowRight className=" h-3 w-3 text-muted-foreground" />} </div> ); } Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.1.11. footer-section.tsx: Akcije ujedinjene sekcije This standardized footer component includes action buttons. It supports multiple buttons with various styling options, ensuring uniformity of Call-to-Action (CTA) elements across all sections. It automatically hides when no actions are defined. // @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<HTMLDivElement> { actions?: FooterAction[]; } export function FooterSection({ actions, className, ...props }: FooterSectionProps) { const router = useRouter(); if (!actions || actions.length === 0) { return null; } return ( <section className={cn("py-4 md:py-6 lg:py-8", className)} {...props}> <div className="container mx-auto px-4"> <PageActions> {actions.map((action) => ( <Button key={action.href} // href должен быть уникальным! size="sm" variant={action.variant || "default"} onClick={() => router.push(action.href)} > {action.label} </Button> ))} </PageActions> </div> </section> ); } Enter fullscreen mode Exit fullscreen mode 2.1.12. body-section.tsx: Arbitrary Content Container 2.1.12.1 Svrha i filozofija serves as a highly flexible container for the main content within sections. Unlike the strictly standardized Header and Footer components, provides complete freedom for placing any React content. BodySection BodySection 2.1.12.2. Content Generation Principles Zadovoljstvo za must be generated as plain TSX without using elementi, gde su svi elementi predstavljeni u proširenom formatu. Crucially: bodyContent .map() typescript // ✅ bodyContent: ( <> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="feature-card"> <h3>Feature 1</h3> <p>Description 1</p> </div> <div className="feature-card"> <h3>Feature 2</h3> <p>Description 2</p> </div> <div className="feature-card"> <h3>Feature 3</h3> <p>Description 3</p> </div> </div> </> ) Ulaz u režim punog ekrana Izlaz u režim punog ekrana // ❌ bodyContent: ( <div className="grid"> {features.map(feature => <FeatureCard key={feature.id} {...feature} />)} </div> ) 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 kao zasebni entitet. 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 ( <div className={cn(className)} {...props}> {children} </div> ); } Enter fullscreen mode Exit fullscreen mode 2.1.12.4 Sastavni delovi // @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<HTMLDivElement> { 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 ( <div className={cn(className)} style={{ height: `${defaultHeightRem}rem` }} {...props} > {/* Empty section with default height */} </div> ); } if (!hasChildren) { return null; } return ( <div className={cn(className)} {...props}> {children} </div> ); } Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.1.12.5. Conclusion djeluje kao most između standardizovane arhitekture sistema i kreativne slobode generacije AI, stvarajući ravnotežu između kontrole i fleksibilnosti. BodySection 2.2. Advanced Custom Components Advanced Custom Components are engineered to deliver complex, interactive functionality that extends beyond the capabilities of our standard architectural patterns. These components are reserved for scenarios requiring state management, sophisticated animations, real-time data handling, or unique business logic. Kada koristiti Custom komponente: Interaktivni elementi: obrasci sa validacijom, kalkulatori, konfiguratori proizvoda. Animirane prezentacije: Kompleksne tranzicije, paralaksni efekti, automatski skloništa. Funkcionalnost u realnom vremenu: razgovori, obaveštenja, datumi uživo. Adaptivna logika: Komponente sa fundamentalno različitim ponašanjem na desktopu u odnosu na mobilne uređaje. Jedinstveni obrasci UI: ne-standardni elementi sučelja specifični za projekt. Arhitektonske integracije: Sastavni dijelovi su integrisani u as distinct Izjave unutar A Ovaj pristup omogućuje im da pristupe kontekstu širom sistema, kao što su teme i informacije o uređaju, dok održavaju dosljedan izgled i osećaj kroz zajedničke CSS klase i dizajnerske žetone. Iako se pridržavaju vizualnog jezika sistema, zadržavaju potpunu slobodu u svojoj internoj logici i implementaciji. Ova strategija pruža ravnotežu između standardizacije većine sadržaja i omogućavanja kreativne slobode u implementaciji složenih interaktivnih elemenata. PageHtmlTransformer case switch 2.2.1 Smjernice za implementaciju prilagođenih komponenti 2.2.1.1 Politika uvođenja otpada : Prilagođene komponente moraju biti vraćene direktno bez uključivanja u ili Oni su odgovorni za upravljanje vlastitim rasporedom, oblogom i slojanjem kako bi osigurali potpunu kontrolu nad njihovom prezentacijom. No External Wrappers Wrapper FullScreenWrapper 2.2.1.2 Sastavni delovi tipkanja : The prop interfaces for a custom component should be declared at the top of the component file itself. All data is passed from the page configuration into the component via the polje u odeljku config. Local Prop Interfaces customComponentsAnyTypeData 2.2 Proširenje SectionType Odjeljak : Svaka prilagođena komponenta zahtijeva jedinstveni tip koji se dodaje Jednostavno u Time se osigurava pravilna provjera tipa i omogućuje izjava u transformatoru kako bi se pravilno identificirala i prikazala komponenta. 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”; Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.2.1.4. ažuriranje slučajeva u ageHtmlTransformer Prilagođena obrada slučajaNovi slučaj se dodaje u PageHtmlTransformer da bi se nosio sa prilagođenim tipom odeljka sa direktnim // В PageHtmlTransformer: case "new-custom-section": return ( <NewCustomSection key={config.id} customData={section.customComponentsAnyTypeData.customData} /> ); Enter fullscreen mode Exit fullscreen mode 2.2.1.5 Struktura prilagođenih konfiguracija : Sljedeći je primer konfiguracije stranice koja uključuje prilagođeni odjeljak. Svi podaci specifični za komponente smješteni su unutar objekta, koji može imati bilo koju strukturu koju zahtijeva komponenta. 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[], Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.2.2 Prilagođeni primjer komponente Uslovi korišćenja 2.2.1 DoublePresentation DoublePresentation Korišćenje 2.2.2.1.1. ažuriranje ključnih tipova Prvo, dodajte novi tip odeljka na Jednostavno SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.2.2.1.2 Dodaj novi slučaj PageHtmlTransformer Struktura transformatora Zatim dodajte odgovarajuću Dva od to render the component. case PageHtmlTransformer case "double-presentation-section": return ( <DoublePresentation key={section.id} metaData={section.customComponentsAnyTypeData.metaData} leftItem={section.customComponentsAnyTypeData.leftItem} rightItem={section.customComponentsAnyTypeData.rightItem} /> ); Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.2.2.1.4 Primjer konfiguracije Evo primjera kako konfigurisati Komponente u . 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 type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section" | "double-presentation-section"; 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[]; Ulaz u režim punog ekrana Izlaz u režim punog ekrana 2.2.2.1.5. Component Kompletni kod za Sastavni 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[], }; Ulaz u režim punog ekrana Izlaz u režim punog ekrana Uslovi korišćenja page-wrapper-types.ts Stranica za štampanje.rs Ovde je kompletna datoteka sa novim tipom uključenim. 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" | "right">( "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; const startAnimationCycle = () => { setSliderKey((prev) => prev + 1); sliderTimer = setTimeout(() => { setActiveContainer((prev) => (prev === "left" ? "right" : "left")); transitionTimer = setTimeout(() => { startAnimationCycle(); }, 500); }, 9000); }; 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) => ( <div className="relative flex flex-col rounded-xl bg-gray-900 text-white shadow-lg mb-6 overflow-hidden"> <div className="w-full relative" style={{ paddingTop: "56.25%" }}> <Image src={item.mediaUrl} alt={item.title} fill className="object-cover rounded-t-xl" sizes="100vw" priority /> </div> <div className="flex flex-col p-4"> <h2 className="text-xl font-bold mb-2">{item.title}</h2> <p className="text-gray-300 mb-2 text-base min-h-16"> {item.description} </p> </div> </div> ); // Desktop card renderer const renderDesktopCard = (item: PresentationItem, isActive: boolean) => ( <motion.div layout animate={{ flex: isActive ? "7 1 0%" : "3 1 0%" }} transition={{ duration: 0.5 }} className="relative flex flex-col rounded-lg overflow-hidden bg-transparent text-white p-0 shadow-lg h-[30rem] flex-shrink-0" > <div className="relative w-full h-60 mb-4 rounded-xl overflow-hidden border-4 border-gray-700"> <Image src={item.mediaUrl} alt={item.title} fill className="object-cover" priority sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" /> </div> <div className="flex flex-col pt-6"> <h2 className="text-2xl font-bold mb-2 whitespace-nowrap overflow-hidden text-ellipsis"> {item.title} </h2> <div className="relative w-full h-px bg-gray-700 mb-4"> <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 } } /> </div> <p className="text-gray-300 mb-4 text-sm line-clamp-4 min-h-[4rem]"> {item.description} </p> </div> </motion.div> ); // Mobile layout if (isMobile) { return ( <section className="w-full pt-20"> <div className="container mx-auto px-4 flex flex-col items-center"> <div className={metaBlockClass}> <h2 className="text-xl font-bold mb-4">{metaData.metaTitle}</h2> <p className={descriptionClass}>{metaData.metaDescription}</p> </div> <div className="w-full flex flex-col"> {renderMobileCard(leftItem)} {renderMobileCard(rightItem)} </div> </div> </section> ); } // Desktop layout return ( <section className="w-full pt-28"> <div className="container mx-auto px-4 flex flex-col items-center gap-12"> <div className={metaBlockClass}> <h2 className={desktopTitleClass}>{metaData.metaTitle}</h2> <p className={desktopDescriptionClass}>{metaData.metaDescription}</p> </div> <div className="flex gap-6 w-full max-w-6xl"> {renderDesktopCard(leftItem, activeContainer === "left")} {renderDesktopCard(rightItem, activeContainer === "right")} </div> </div> </section> ); } Ulaz u režim punog ekrana Izlaz u režim punog ekrana Zaključak: Kako izvući najviše iz ove dokumentacije Razumijemo da uputstva i komponente predstavljene ovde mogu izgledati opsežne za jedan post. Možete čak osjetiti da ovo nije najuzbudljivije čitanje, a vi biste bili u pravu. Ovo nije zabava; to je detaljan tehnički vodič dizajniran da vam da potpunu kontrolu nad moćnim sistemom. Kako bi se proučavanje ovog složenog sistema pretvorilo u interaktivan i produktivan proces, preporučujemo sledeći pristup. Koristite AI za ubrzano učenje Umesto da pasivno čitate, koristite ovu dokumentaciju kao "mozak" za svog AI asistenta. Your Action Plan: Kopirajte sav sadržaj ovog članka, od uvodnog do ovog odeljka. Koristite ga kao sistemski poziv za ChatGPT. To će AI-u pružiti puni kontekst arhitekture o kojoj govorimo. 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 Ova metoda će vam pomoći da razumete principe aplikacije mnogo brže. Možete pronaći potpuni izvorni kod za ovaj projekat na našoj stranici . GitHub repozitorij What's Next? U ovom članku, izgradili smo jedan od dva ključna dijela našeg sustava za stvaranje web stranica: datoteke u React komponente spremne za upotrebu. Ovo otvara put za automatsko stvaranje stranica, gde AI može generisati konfiguraciju, a naša pretvara ga u prekrasan interfejs. a tool that transforms a Config Transformer Da biste videli naš projekat u akciji, posetite live demo na . aifa.dev Uslovi korišćenja A Glimpse into Future Posts: Sljedeći članak će se usredotočiti na drugu ključnu tehnologiju: generiranje stranica (dokumentacija, tutoriali, stranice proizvoda) iz Markdown datoteka. Dio 3: Od konfiguracije do korisničkog interfejsa. ponovo ćemo pogledati temu ovog članka i duboko ući u to kako se konfiguracija generisana ChatGPT-om pretvara u React komponente i kako se taj proces može proširiti. U narednom tutorial, mi ćemo početi odgovoriti na jedno ključno pitanje: Ostanite tunirani! Why was Markdown chosen for content management?
