Engaging with customers and prospects is a critical and constant demand, and as such, maintaining a blog can often be an integral part of any company’s brand. Within the world of CMS, blogs are an obvious use case that provides marketing and dev teams alike with a flexible way to maintain and manage huge amounts of content. Hundreds or even thousands of articles can be authored, edited, and arranged for efficient management of impactful content that can be shipped at the speed of now.

A cornerstone of Builder’s platform is the flexible composability we provide in mapping Builder functionality to your app’s exact use cases and setup. Here we walk through three of the most popular approaches that we see at Builder for implementing blogs, and the pros and cons for each approach:

1. The data model approach — quick and simple; potentially rigid, requires developer to update templates
2. The visual section model approach — flexible, dynamic, requires some dev setup, but total WYSIWYG freedom when authoring blog content
3. The hybrid approach — flexible and dynamic, requires more initial architecting, but blog content can dynamically use templates or freeform WYSIWYG editing

Tip: For this article we are using the NextJS Page router but the logic and general data flow would be the same for the NextJS App Router, or really any framework. Find more in info in our Blueprints and Integration docs for Page, Section or Data models

The Data model approach

Structured Data models are at the core of any CMS, and Builder is no different. With live editing and previewing, Builder Data models have the unique ability to view your content while editing in real-time, as if you were on your live site in an almost exact 1:1 preview experience.

With the Data model approach to building your blog, you can fetch Builder data and plug it into your existing blog templates across any framework, or build new ones in code to render dynamic content quickly with this straightforward approach.

To utilize this approach, first, you need to create a Data model to contain all of your blog content.

Model definition

Lets create a data model in Builder named blog-article, to store and create blog articles:

Code implementation

Once you have created your Data model, you can then fetch the data using one of Builder’s SDK or APIs and plug it into the appropriate slots within your code. For our Next JS app, that might looks something like this:

// code snippet for /blog/[slug].js import { useRouter } from 'next/router' import { builder, useIsPreviewing, BuilderContent } from '@builder.io/react'

export async function getStaticProps({ params }) {

const articleData = (await builder .get('blog-article', { query: { 'data.slug': params?.slug }, //enrich the data to make sure our author reference includes all content options: { enrich: true }, }).toPromise()) || null

return { props: { articleData }, // Next.js will attempt to re-generate the page: // - When a request comes in // - At most once every 5 seconds revalidate: 5, } }

export async function getStaticPaths() { const articles = await builder.getAll('blog-article', { options: { noTargeting: true }, fields: 'data.slug', })

return { //generate all the article paths from their associated slug paths: articles.map((article) => /blog/${article.data?.slug}), fallback: true } }

export default function BlogArticle({ articleData }) { const router = useRouter(); const isPreviewingInBuilder = useIsPreviewing(); const show404 = !articleData && !isPreviewingInBuilder;

if (router.isFallback) { return

Loading...