## Introduction Structuring content is hard when you’re starting a site or app, whether it’s a company website, an e-commerce app, or a landing page. In this tutorial, you’ll design a scalable Strapi 5 content page builder using Strapi collection/single types, components, dynamic zones, and relations. You’ll also see when to use each and how to accelerate with Strapi AI and Vercel v0. ### Tutorial Outcomes By completing this tutorial, you'll * Understand content modeling fundamentals * Know when to use different Strapi content types such as collection types, single types, components, relations, and dynamic zones * Have a production-ready content model for company websites * Explore AI-powered workflows with Strapi AI and Vercel v0 ## Prerequisites: * Basic understanding of databases and content management * Strapi 5 is installed and running * Access to the Strapi admin panel ## Video Tutorial If you prefer the video version of this tutorial, check out the full tutorial below: ## Content Modeling Fundamentals ### What is Content Modeling Content modeling is the process of defining and structuring content so it can be managed, reused, and delivered consistently across different platforms. ![Content Model Image.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Content_Model_Image_1fa088210a.png) In simple terms, it’s about deciding what content you have, what fields it needs, and how it relates to other content. As [Marcelo Lewin](https://www.linkedin.com/in/bymarcelolewin/), founder of [Headless Creator](https://www.headlesscreator.com/) puts it: ![Marcelo Lewin Quote.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Marcelo_Lewin_Quote_118d6eee4f.png) What are the benefits of content modeling? Why does it matter? Let's find out in the next section. ### Key Benefits of Content Modeling Content modeling benefits not only developers, but also editors, designers, and the business as a whole. It creates a shared foundation for how content is structured, stored, and delivered. ![Importance of Content Modeling - visual selection.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Importance_of_Content_Modeling_visual_selection_ff617b420e.png) 1. **Content Reusability:** A well-designed content model makes your content reusable across multiple channels. 2. **Improved Editorial Experience:** For content editors, a thoughtful model reduces friction. 3. **Faster Development:** Developers spend less time restructuring messy data, which accelerates builds and iterations. 4. **Improved Collaboration:** Aligns developers, editors, and designers around a common content framework. 5. **Futuristic:** Abstracting content from presentation makes it easier to adapt to new platforms and technologies. 6. **Scalability:** Content modeling can enable you to scale with growing datasets. 7. **Reduced Costs Over Time:** Avoids rework, duplication, and migration issues, ultimately saving time and money. ## Traditional CMS vs Headless CMS For content editors coming from tools like WordPress, [content modeling](https://strapi.io/blog/everything-you-need-to-know-about-content-modeling) in a headless CMS like Strapi can feel unfamiliar. The key difference lies in how content and presentation are handled. ### Content vs. Presentation * Traditional CMS: Content and presentation are tightly coupled (e.g., themes, templates). * Headless CMS: Focuses only on the content structure and intent, leaving presentation to the frontend. ### Focus on Intent * Traditional CMS is built for looks and single-channel delivery. * Headless CMS is built for intent and structure—making content reusable across websites, apps, and even IoT devices. ### The "Headless Dilemma" Editors familiar with traditional CMS tools often ask: “Where’s the page builder?” The answer: a headless CMS isn’t about static page design. It’s about creating flexible content models that can power any channel, now or in the future. Where do you start when designing your content model? Let's explore the basics of content modeling in a headless CMS like Strapi. ## Strapi 5 Content Types Deep Dive "A headless CMS is the technology that makes this new way of managing content possible. Content modeling is the practice that ensures that your content's purpose is clear." Those are the words of ***Larry Swanson*** from "[Content Strategy Insights](https://www.youtube.com/@ContentStrategyInsights)". Content modeling gives purpose, and a headless CMS like Strapi gives it omnichannel delivery. [Strapi 5](https://strapi.io/five) is a headless CMS that provides powerful native content modeling features that are ideal for implementing a flexible page builder. ### Understanding Strapi Content Types There are 2 different types of models in Strapi: 1. **Content-types**: For single and multiple entries. E.g., Collection types and Single types. 2. **Components**: Re-usable content structures in multiple content types. Let's discuss them further. ### 1. Collection Types A collection type is used for content that can have multiple entries (e.g., **“Blog”**, **“Category”**, **"FAQ"**, **"Page"**, etc., where you’ll have many instances). ![Collection Types.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Collection_Types_e65b0de9b4.png) ### 2. Single Types A single type is used for one-off content pieces that exist only once (e.g., a single “Homepage Settings” or “About Us” content). ### 3. Fields Fields are the smallest units of content (often referred to as attributes). Strapi fields can further be grouped into: * Top-level fields (text, number, date, JSON, etc.) * System fields (createdAt, createdBy, updatedAt, publishedAt) * Media fields (images, files) * Reference fields (relationships to other types) Here are the fields you can find in your [Strapi admin panel](https://docs.strapi.io/cms/features/admin-panel). ![Strapi fields.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Strapi_fields_162a5ac9cc.png) ### 4. Components (Reusable Content Blocks) [Components](https://docs.strapi.io/cms/backend-customization/models#components-json) in Strapi are collections of fields that serve as reusable building blocks. Instead of recreating the same fields repeatedly, you bundle them together. For example, an SEO component with `metaTitle`, `metaDescription`, and `image`. Components can also be nested (a “Button” inside a “Hero Section”). This promotes reuse and consistency. ### 5. Strapi Dynamic Zones A Strapi [dynamic zone](https://strapi.io/features/dynamic-zone) is essentially a special field type that allows an entry to hold a mix of different components and arrange them in any order. You can think of a Strapi dynamic zone as a placeholder in your content type (like a “Sections” field) where editors can insert any number of predefined components. In the image below, you can see components `Hero`, `Features`, `Testimonials`, `How_It_Works`, `Brands`, and `Pricing` as components inside the dynamic zone field called `dynamic_zone`. ![dynamic zone example.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/dynamic_zone_example_fbe54820b3.png) ### 6. Relations [Relations](https://strapi.io/features/relations) connect content types together. They make content reusable across contexts without duplication. There are 6 different types of relations in Strapi: * **One way:** Content-type A has one Content-type B * **One-to-one:** Content-type A has and belongs to one Content-type B * **One-to-many:** Content-type A belongs to many Content-type B * **Many-to-one:** Content-type B has many Content-type A * **Many-to-many:** Content-type A has and belongs to many Content-type B * **Many-way:** Content-type A has many Content-type B [Understanding & using relations](https://strapi.io/blog/understanding-and-using-relations-in-strapi) without overusing components is very crucial to content modeling. ![Relation Example.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Relation_Example_f92fffb199.png) To learn more about Strapi content models, visit the [documentation page for Models](https://docs.strapi.io/cms/backend-customization/models). ### Choosing Between Types, Components & Zones in Strapi When modeling content in Strapi, it’s not always obvious whether to use a **collection type**, a **single type**, a **relation**, a **component**, or a **dynamic zone**. Here’s a simple guide to help you decide. * Use **Collection Types** when you need many entries of the same kind (e.g., Blog Posts, Team-Members, FAQs). * Use **Single Types** when you need exactly one entry in the system (e.g., Global Settings). * Use **Components** when you need to reuse structured fields across multiple content types (e.g., Address, SEO, Link). * Use **Relations** when data will appear in multiple places. * Use **Dynamic Zones** when you want editors to choose from different types of sections (Hero, Features, Testimonials, FAQ Block). ![Content Type User Flow.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Content_Type_User_Flow_e1f9cc54a8.png) ## Step-by-Step: Building a Page Builder in Strapi 5 In this section, we’ll build a **Company Website content model** in [Strapi 5](https://strapi.io/five) using content modeling best practices. The goal is to design a **Company Website content model** in Strapi. Here are the key steps: 1. Create a Diagram of Content Model 2. Create Collection Types in Strapi 3. Create Reusable Components in Strapi 4. Create Single Types in Strapi. 5. Create Relations in Strapi. 6. Create Dynamic Zones in Strapi. By following these steps, you’ll get a blueprint for building your own flexible and maintainable page builder. ## Planning Your Content Model The diagrams below outline all collection types, single types, components, and dynamic zones: **Collection types, Single Types, Components, and Dynamic Zones** ![Strapi Content Model.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Strapi_Content_Model_0ba189e6f8.png) **Complete Diagram** ![Updated Content Model.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Updated_Content_Model_3c70ae6067.png) ### Collection Types for Company Website For a company website example, we will create the following collection types. 1. **User:** Represents people who interact with the system. This is required for blog post authorship and access control. You don’t need to redefine it. Strapi generates it automatically. 2. **Blog:** Stores blog posts or articles. Enables marketing and content publishing directly in the CMS. Related to User (author), Category, and Tag. 3. **Tag:** Adds labels to blog posts (e.g., “Headless CMS”, “Strapi 5”, “Content Modeling”). Supports flexible filtering and SEO-friendly content discovery. 4. **Category:** Groups blog posts by theme (e.g., “Tech”, “Culture”, “Events”). Makes it easier for readers to filter and explore content. 5. **State:** Stores consistent state/province values. Keeps addresses structured and normalized. Prevents editors from typing “CA”, “California”, or “Calif.” inconsistently. 6. **Country:** Stores reusable country entries. Ensures consistency for global businesses. Makes filtering, sorting, and querying content by location possible. 7. **Pages:** Used to manage individual website pages (e.g., Home, About, Services, Careers). Uses a dynamic zone for flexible sections. Great for page builder experience because editors can build flexible and structured pages without touching code. 8. **FAQ:** Stores individual frequently asked questions (question, answer). 9. **FAQ-Category:**: Groups FAQs for easier filtering (e.g., “Product”, “Pricing”, “Support”). 10. **Team-Member**: Profiles for employees displayed on the website. Separates team presentation content from the system User. Not all team members need Strapi accounts. 11. **Feature**: Represents product or service highlights (e.g., “Fast integration”, “Secure by default”). Keeps features reusable across multiple pages (Home, Pricing, Product). Prevents duplication. ### Components for Company Website * **Address:** This is a component because it keeps address data structured and consistent. It can be reused in multiple places. By separating **State** and **Country** into their own collection types, it enables filtering, sorting, and future scalability. * **Link:** This is a component because it acts as a universal “link atom” for your site. The Link component can be reused in **Header**, **Footer**, **Feature**, CTAs, Social links, or anywhere links are needed. This eliminates redundancy and ensures consistent structure for links across the entire site. * **Footer:** This is a component because it keeps footer content structured and editable in one place. Editors don’t need developer help to update footer links or CTAs. * **Header:** This is a component because, like the footer, it centralizes header content for editors. Repeatable **Link** components make the navigation flexible but consistent. It also eliminates the need for a separate Navigation collection type since header navigation is managed right here. * **SEO:** This is a component because it centralizes all SEO-related fields in one reusable block. Ensures every Page and Blog post has proper metadata. ### Dynamic Zones for Company Website Dynamic zones are what make Strapi feel like a page builder for non-technical editors. Instead of hardcoding fields into every content type, you give editors a flexible toolbox of components they can mix, match, and reorder. * **FAQBlock:** The **FAQBlock** displays a list of frequently asked questions and their answers. It typically pulls its data from the **FAQ** collection type (through a relation). Why this is a dynamic zone is that **FAQs** aren’t required on every page. Editors may want to add or remove them based on context (e.g., show FAQs on the Pricing page, but not on the About page). By making it a dynamic zone component, editors can insert the FAQ section only where it makes sense, without developers having to hardcode it. * **HeroSection:** The **HeroSection** is usually the large, visual section at the top of a page. It often includes a title, subtitle, image, and call-to-action button. We made this a dynamic zone because not every page needs a Hero Section, but many do (Home, Product, Careers). Each Hero may look different (different CTA, different imagery). By modeling it as a dynamic zone component, editors can easily drag and drop a Hero Section into any page they want and customize it independently. * **Testimonial:** The Testimonial component highlights quotes or reviews from customers, users, or partners. It usually includes a quote, the author’s name, role, and photo. Testimonials are a dynamic zone because they are contextual. This means you might want them on the Home page, a Product page, or a dedicated Success Stories page. They’re not globally required, so making them a fixed field in every Page type would be overkill. ### Single Types for Company Website * **GlobalSettings**: Holds the site-wide configuration and content of the company, such as the site name, logo, etc. **GlobalSettings** exists because some content belongs to the entire site, not to individual pages. By making it a Single Type, Strapi enforces that rule and simplifies life for both developers and editors. Now, let's design a company website content model in Strapi 5. ## Implementing Company Website Model in Strapi 5 There are 3 ways to create content types in Strapi. * Using the [Content-Type Builder](https://docs.strapi.io/cms/features/content-type-builder) in the admin panel * Using the [Strapi CLI](https://docs.strapi.io/cms/cli) * Manually editing [schema files](https://docs.strapi.io/cms/backend-customization/models#model-schema) (`schema.json`) for content types in your project’s file structure, like the `Category` collection type below: ```json { "kind": "collectionType", "collectionName": "categories", "info": { "singularName": "category", "pluralName": "categories", "displayName": "Category" }, "options": { "draftAndPublish": true }, "pluginOptions": {}, "attributes": { "name": { "type": "string" }, "slug": { "type": "uid", "targetField": "name" }, "blogs": { "type": "relation", "relation": "oneToMany", "target": "api::blog.blog", "mappedBy": "category" } } } ``` For this article, we will use the Content-Type Builder in the Strapi admin panel. ### Step 1: Creating Collection Types in Strapi The **User** collection type is automatically created by Strapi. We'll create the remaining collection types. ![User collection Type.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/User_collection_Type_8183a838cc.png) **1.1 Create Country Collection Types** Begin by creating the **Country** collection type, which holds the fields `name` and `code`. To do this: 1. Navigate to **Content-Type Builder** in the admin panel 2. Click "COLLECTION TYPES +" 3. Enter "Country" as the display name ![Create Country Collection Type.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_Country_Collection_Type_139c1ce020.png) 5. Click "Continue" 6. Add these fields: `name` (Short text) and `code` (Short text) 6. Click the "Save" button You should now have the Country collection type as shown below: ![Country Collection Type and Fields.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Country_Collection_Type_and_Fields_7431eb8c21.png) **1.2 Create Remaining Collection Types** Proceed to create other collection types. Follow the same process and create these collection types: | Collection Type | Fields | | ------------------ | ------- | | `User` | Automatically created by Strapi| | `Country` | `name` (Short text),
`code` (Short text) | `State` |`name` (Short text),
`code` (Short text)| | `Blog` |`title` (Short text),
`slug` (Short text)
`body` (Rich Text Markdown)
`banner` (Single media)| | `Category` | `name` (Short text),
`slug` (UID - set the attached field as `name`) | | `Tag` | `name` (Short text),
`slug` (UID - set the attached field as `name`)| | `Page` | `title` (Short text),
`slug` (UID - set the attached field as `title`),
`content` (Rich Text markdown). `content` is the main write-up of the page | | `FAQ` | `question` (Short text),
`answer` (Long text) | | `FAQ-Category` | `name` (Short text)| |`Team-Member` | `name` (Short text),
`role` (Short text),
`bio` (Long text),
`photo` (Media - Single media)| | `Feature` | `title` (Short text),
`description` (Long text) |
> NOTE: `User` comes from the users-permissions plugin; you don’t create it. You should have the complete collection types created in your Strapi admin panel, as shown in the image below: ![Complete Collection Types.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Complete_Collection_Types_d138c6b7dd.png) ### Step 2: Creating Reusable Components in Strapi Let's move further with creating reusable components. Components require a name and category. Categorizing components properly is key to keeping your Strapi content model organized and intuitive for editors. **2.1 Create Address Component** * Click the "COMPONENTS +" tab in Content-Type Builder * Enter "Address" as the display name * Set category as "shared" ![Create Address Component.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_Address_Component_3dd5f2eed0.png) * Click the "Continue" button * Add these fields: `streetNumber` (Number), `streetName` (Short text, required), `city` (Short text, required) * Click the "Save" button. This is what the "Address" component should look like: ![Address Component.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Address_Component_5390da6cdb.png) Proceed to create the other components. **2.2 Create Additional Components** This is a summary of the components you should create: | Component | Category | Icon | Fields | |-----------------|---------------|------|--------| | `Address` | Shared | 📍 | `streetNumber` (Number),
`streetName` (Short text),
`city` (Short text),
`geoLocation` (JSON or Coordinates) | | `SEO` | Global | 🔍 | `metaTitle` (Short text),
`metaDescription` (Long text),
`keywords` (Long text),
`canonicalUrl` (Short text) | | `Footer` | Global | 📄 | `logo` (Media - Single media),
`copyright` (Short text)| | `Header` | Global | 📄 | `logo` (Media - Single media)| | `Link` | Shared | 🌐 | `label` (Short text),
`url` (Short text)
`icon` (Single Media)|
### Step 3: Create Single Types Single Types in Strapi are meant for singleton content. You should use single types when you only need one entry across the entire system. * Click "SINGLE TYPES +" in Content-Type Builder * Enter "GlobalSettings" as display name * Add the fields and components in the table below: |Single Type| Fields and Components | |------------|-------| | `GlobalSettings` | `siteName` (Short text),
`companyName` (Short text),
`logo` (Media - Single),
|
* Ensure you click the "Save" button Later on, we will add components such as a `footer` field for the `Footer` component, `defaultSEO` for the `SEO` component, and a few other components. Here is what the `GlobalSettings` single type should look like: ![GlobalSettings Single Type.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Global_Settings_Single_Type_ef25df8acc.png) ### Step 4: Create Dynamic Zone Components Dynamic Zones in Strapi let you build flexible pages by stacking predefined page section components in any order. **4.1: Create Dynamic Zone Components** Start by creating the components below. Remember to categorize them as dynamic zones. | Component | Category | Icon | Fields | |--------------|--------------|------|--------| | `HeroSection ` | Dynamic-Zone | 🖼️ | `title` (Short text),
`subtitle` (Long text),
`image` (Media - Single), | | `Testimonial` | Dynamic-Zone | 💬 | `quote` (Long text),
`authorName` (Short text),
`authorRole` (Short text),
`authorPhoto` (Media - Single) | | `FAQBlock` | Dynamic-Zone | ❓ | `title` (Short text)|
The `title` in the `FAQBlock` above represents the title for a FAQ, e.g., “Frequently Asked Questions”, “Need help?”, or “Your Questions Answered”. Recall that we also have the `FAQ` collection type. This means we have to create a relational field between the `FAQBlock` component and the `FAQ` collection type, as we will see in the section for creating relations in Strapi. Here is what the components for dynamic zones should look like: ![Components and Dynamic Zones.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Components_and_Dynamic_Zones_c936553162.png) ### Step 5: Add Dynamic Zones to Collection Types We will add fields `sections` and `dynamic_zones` to the `Page` and `Blog` collection types. You can choose to name them based on naming conventions that are preferable to you. | Dynamic Zone | Used In | Components Allowed | |--------------|---------------|---------------------| | `sections` | `Page` (Collection Type) | `HeroSection`, `Feature`, `Testimonial`, `FAQBlock` | | `dynamic_zone` | `Blog` (Collection Type) | `FAQBlock` |
In the table above, **Blog** posts only need the `FAQBlock` and don't need hero sections, features, and testimonials. Later on, as the website grows, you can add more components to the dynamic zones. **5.1 Add Dynamic Zone to Page Collection Type** * Navigate to **Page** collection type in Content-Type Builder * Click "Add another field to this collection type" * Select "Dynamic Zone" field type ![Create Dynamic Zone field.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_Dynamic_Zone_field_bd724072e0.png) * Give the name of the field as `sections` * Add components to the zone by clicking the "Add components to zone" button. * Select the "Use an existing component". * Ensure you select the "Use an existing component" option and select all the components under the `dynamic-zone` category. ![Select Dynamic Zone component.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Select_Dynamic_Zone_component_92cef1b3ca.png) This is what the `Page` collection type should look like after adding a dynamic zone. ![Page Collection Type Dynamic Zone.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Page_Collection_Type_Dynamic_Zone_2dab712fa8.png) > 👋 NOTE > You can create a dynamic zone on the fly with new components without having to initially create components. Next, create the dynamic zone for the `Blog` collection type. **5.2 Add Dynamic Zone to `Blog` Collection Type** * Navigate to **Blog** collection type * Add dynamic zone field named `dynamic_zone` like we mentioned earlier * Add only the `FAQBlock` component (blog posts don't need hero sections or features) * Save changes As needs increase, you can add other components to this dynamic zone. As mentioned earlier, we haven't added relations that should be present inside collection types, single types, components, and dynamic zone components. Let's do that in the next section. ### Step 6: Add Components to Content Types Now, we will add some components we have created to content types where they are needed. **6.1 Add Components to Components** As discussed earlier, the `Link` component can be reused inside the `Header`, `Footer`, CTAs, Social links, or anywhere links are needed. So, let's add the `Link` component to the `Header` and `Footer` components we have created. * Navigate to the `Footer` component in the Content-Type Builder. * Click the "Add another field to this component" button. * Select the `Component` field type. ![Select Component Field Type.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Select_Component_Field_Type_1111f1e683.png) * Select the "Use an existing component" option. * Give the field the name `links` and select `shared - Link` as a repeatable component. * And click the "finish" button. ![Add Component to Component.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Add_Component_to_Component_a880a8d78c.png) Proceed and do the same for the `Header` component. | Component | Fields and Components| |-----------------|---------------------| | `Footer` | other fields...,
`links` (Component →`Link` (Repeatable) | | `Header` | other fields...,
`links` (Component →`Link` (Repeatable) )| | `Feature` | other fields...,
`link` (Component →`Link` )
**6.2 Add Components to Single Types** Add the following components to the `GlobalSettings` single type. These components belong in `GlobalSettings` because they represent structured, reusable global content blocks (SEO, footer, header, address, and social links) that ensure consistency and are managed centrally in one place. |Single Type| Fields and Components | |------------|-------| | `GlobalSettings` | other fields...,
`footer` (Component → `Footer` (Not Repeatable)),
`header` (Component → `Footer` (Not Repeatable)),
`defaultSeo` (Component → `SEO` (Not Repeatable)),
`socialLinks` (Component → `Link` (Repeatable)),
`address` (Component → `Address` (Not Repeatable)) |
**6.3 Add Components to Collection Types** Add the following components to collection types. |Collection Type| Fields and Components | |------------|-------| | `User` | other fields...,
`address` (Component → `Address` (Not Repeatable)) | | `Page` | other fields...,
`seo` (Component → `SEO` (Not Repeatable)) | | `Blog` | other fields...,
`seo` (Component → `SEO` (Not Repeatable)) |
### Step 7: Create Relations Relations connect content types and enable content reuse. **7.1 Create FAQ to FAQ-Category Relation** We will create a field called `category` inside the `FAQ` collection type that will be a many-to-one relation with `FAQ-Category`. This means that many FAQs belong to one FAQ category. * Navigate to `FAQ` collection type * Click "Add another field" * Select "Relation" field type ![Create relation.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_relation_fdf2b1ea7b.png) * Enter the field name as `category` for the `FAQ` collection type. * Select the `FAQ-Category` as the **target** relation. Give the `FAQ-Category` field name as `faqs` (inverse name). * Select "FAQ-Category has many FAQ". See image below: ![FAQ and FAQ-Category relation.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/FAQ_and_FAQ_Category_relation_9c0c9c95aa.png) * Click the "Finish" button. This is what the `FAQ` and `FAQ-Category` should look like: ![FAQ collection type.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/FAQ_collection_type_c09503b14c.png) The `FAQ` collection type has a `manyToOne` relation with the `FAQ-Category` collection type. Whereas, the `FAQ-Category` has a `oneToMany` relation with the `FAQ` collection type. ![FAQ Category collection type.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/FAQ_Category_collection_type_3338b095ff.png) **6.2 Create All Relations** Now, create the following relations. **Relations for Collection Types** | Source | Field | Target | TypeDescription | |---|---|---|---| | FAQ | `category` | `FAQ-Category` *(inverse: `faqs`)* | **Many-to-one** — many FAQs belong to one FAQ-Category; the FAQ-Category has many FAQs. | | Blog | `author` | `User` *(inverse: `blogs`)* | **Many-to-one** — many Blog posts belong to one User (author); a User has many Blogs. | | Blog | `category` | `Category` *(inverse: `blogs`)* | **Many-to-one** — many Blogs belong to one Category; a Category has many Blogs. | | Blog | `tags` | `Tag` *(inverse: `blogs`)* | **Many-to-many** — many Blogs relate to many Tags; Blogs has and belongs to many Tags. | | Page | `features` | `Feature` *(no inverse)* | **manyWay** — a Page can have many feaures|
> NOTE: Ensure `User` is User (from: users-permissions) **Relations for Components** | Source | Field | Target Collection Type | TypeDescription | |---|---|---|---| | `Address` | `state` | `State` | **One-way** — `Address` references one `State`; no inverse field on `State`. | | `Address` | `country` | `Country` | **One-way** — `Address` references one `Country`; no inverse field on `Country`. | | `FAQBlock` | `faqs` | `FAQ` | **Many-way (one-way many)** — `FAQBlock` references many `FAQ` entries; no inverse field on `FAQ`. |
## GitHub Repo The complete content model for the company website example can be found [here](https://github.com/Theodore-Kelechukwu-Onyejiaku/strapi5-page-builder-example). Let's explore some content modeling pitfalls and best practices. ## Content Modeling Pitfalls and Best Practices 1. **Plan Ahead Before Building** Use diagrams or mapping tools (like Miro boards) to outline your content types and relationships. 2. **Focus on Content Intent, Not Design** Designing content structures around how they “look” (templates/themes) and not what the content does is not best practice. Always ask, "What does the content do?". And avoid tying data structures to visual presentation. 3. **Use Relations for Reusable Content** Avoid repeating the same content as components in multiple places. Instead, create a **relation** so content can be queried and reused across different contexts. 4. **Use Components for Context-Specific Content** People “make everything a component,” then can’t query or reuse it. Components are best for content that is unique to a single place and doesn’t need to be queried independently. Turning every structure into a collection type adds unnecessary relations and complexity. ```js // BAD SEO (Collection Type) - metaTitle - metaDescription // GOOD SEO (Component) - metaTitle - metaDescription ``` 5. **Avoid Deep Nesting** Limit nested relations or components to two or three levels. Deep nesting negatively impacts performance. ```js // BAD: Deep nesting chain LandingPage - pricing (Component) - plans (repeatable Component) - services (relation) - link (Component) ``` If you hit the 2-level limit, reconsider the structure rather than forcing it in schema.json. 6. **Optimize API Queries** Query only the fields you need. Don’t fetch everything. Use filters, sorting, and population selectively to reduce performance costs. ```js // BAD GET /api/blogs?populate=* // GOOD GET /api/blogs?populate=author ``` You can learn how to query, populate, and filter data in Strapi using this [tutorial](https://strapi.io/blog/demystifying-strapi-s-populate-and-filtering). 7. **Use Single Types for global, one-off content** Treating site-wide settings as a collection creates duplicates and confusion for editors. ```js // BAD SiteSettings (Collection Type) // multiple entries created by mistake // GOOD SiteSettings (Single Type) // only one global entry ``` 8. **Choose Strapi Dynamic Zones for Page-builder Flexibility** Treating dynamic zones as a dumping ground (many polymorphic components, each with nested structures) degrades performance. Reserve dynamic zones for editor-chosen sections (`HeroSection`, `Testimonial`, `FAQBlock`). Keep the set curated and avoid deep nesting inside those components. 9. **Think Multi-Channel from the Start** Even if you’re only building a website today, assume content will later be consumed by apps, IoT devices, or other platforms. Keep structures **platform-agnostic** to future-proof data. With AI tools on the rise, can we speed up content modeling and development? The answer is "Yes!". In the next section, you will use Strapi AI and Vercel v0 to speed up content modeling implementation in Strapi and frontend generation using Vercel v0. ## AI-Powered Content Modeling with Strapi AI With [Strapi AI](https://strapi.io/ai), which is basically for content modeling, you can build your content structure in minutes. You can generate a complete content schema with Strapi AI in the following ways: 1. Chat with the Strapi AI 2. Upload your app 3. Import from Figma or upload an image In this section, we will chat and upload an image of the content model we created earlier in this article. ## Getting Started with Strapi AI To get started with Strapi AI, you can check out the video below: ### Step 1: Import Content Model Diagram Images In this tutorial, you will only upload the image diagram of the content models we have created in this tutorial and ask the Strapi AI to implement it. * Navigate to the Content-Type Builder, where you will find the Strapi AI at the bottom-right corner. * Click the Strapi AI icon to start a chat. * Attach the images of your content type. ![strapi AI.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi_AI_5117fd68da.png) ### Step 2: Prompt Strapi AI Chat with Strapi AI using the following prompt: ``` Generate the content types for a company website using the attached images. ``` Strapi AI will go ahead to automatically create the content types for a company website, as shown in the GIF below. ![Strapi AI generates content model](https://delicate-dawn-ac25646e6d.media.strapiapp.com/cursorful_video_1756840294550_47efa83cfa.gif) You can take a step further to customize your content type by chatting with the Strapi AI. ## Using Vercel v0 to Create the Frontend With [Vercel v0](https://v0.app/) you can do a whole lot of amazing things. For example, you can [Build a Landing Page with AI and Next.js](https://strapi.io/blog/build-a-landing-page-with-ai-and-nextjs) using v0. Although this might not be the best approach, we can do it in 3 steps. ### Step 1: Generate API Documentation Install the [Strapi API Documentation plugin](https://market.strapi.io/plugins/@strapi-plugin-documentation) from the Strapi [plugin marketplace](https://market.strapi.io/plugins) to create an OpenAPI Document and visualize your API with SWAGGER UI on port: `http://localhost:1337/documentation/v1.0.0` ![Strapi documentation plugin.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Strapi_documentation_plugin_3cb89d2d24.png) ![visualize strapi api.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/visualize_strapi_api_241d07d4ae.png) ### Step 2: Visit v0 by Vercel to Type in your Prompt Visit the v0 by Vercel page at [v0.app](https://v0.app). ![v0 by Vercel page.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/v0_by_Vercel_page_d1680bf6ca.png) ### Step 3: Enter your Prompt We will ask v0 to create a frontend for the company website using the API documentation link and the image diagrams of the content models. ``` Using the following documentation: http://localhost:1337/documentation/v1.0.0 and content model diagrams attached, create the frontend of a company website. ``` ![Prompt result from v0](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Generate_Frontend_with_v0_3db43dbe06.gif) > NOTE > The `localhost` server isn't accessible from the v0 environment. You should have a production server so that v0 can access your documentation. For production usecases, it is recommended to deploy your Strapi app to [Strapi cloud](https://strapi.io/cloud) as shown below. That way, you can preview your Strapi app live!: ![Strapi Cloud](https://hackmd.io/_uploads/S1nlFYxoxl.png) v0 will take a while to create the frontend as shown above. After successful generation, you can export your code through your console: `npx shadcn@latest add ` or as a ZIP file and customize the frontend to use your Strapi backend! To learn more, visit the blog post: ["Building the Future Web: Best Practices with Strapi, Nextjs, & v0"](https://strapi.io/blog/building-the-future-web-best-practices-with-strapi-nextjs-and-v0). ## Conclusion Content modeling is the foundation for building scalable projects. By carefully structuring your data using collection types, single types, components, relations, and dynamic zones, you create a model that works for everyone and for the future. In this tutorial, we walked through creating a complete company website model in **Strapi 5**. We also explored how **Strapi AI** can accelerate content modeling and how tools like **Vercel v0** can instantly generate a frontend using your content model. Next Steps: * Populate your content types with sample data * Set up proper permissions and workflows * [Integrate](https://strapi.io/integrations/nextjs-cms) with your frontend application * Implement [performance optimizations](https://strapi.io/blog/web-performance-optimization-in-nextjs) To learn more about content modeling and how to structure data, watch the video below:

No results