# Integrate Blog Article Building

Builder's Visual Editor is especially powerful for creating rich blog article content. For an in-depth guide for how to make a blog in Builder, visit [Create a drag-and-drop editable blog with Next.js](/content/blog/creating-blog/index.html).

## Model definition

First, create a [Section model](/content/c/docs/models-pages/index.html) in Builder named `blog-article` to store and create blog articles:

| Name   | Type     | Notes |
|--------|----------|-------|
| Title  | `text`   | This is the article title when listing articles and for the page `<title>` tag for SEO; for example, "Announcing our new product line". |
| Handle | `text`   | This is the URL handle; for example, `new-product-line`. |
| Image  | `file`   | This is the main image for the blog post — for example, when listing articles — as well as the `og:image` for previewing on social media sites like Facebook. |
| Date   | `timestamp` | This is the date for displaying when this was posted and for filtering by date posted. |
| Blurb  | `text`   | _Optional_<br>This is the preview text when listing blog articles, and optionally can be the SEO `meta description` as well. |
| Author  | `reference` | _Optional_<br>Use this to list info about authors. We recommend making a new [data model](/content/c/docs/guides/getting-started-with-models/index.html)—for example, with fields `full name` of type `text` and `photo` or type `file`—and using a reference type to reference the author for an article. |

You can create as many additional [fields](/content/c/docs/custom-fields/index.html) as you like for additional product info.

## Example code

Next, create a paginated blog article list that lists each article along with some info about each one. Example information can include an image, a title, and a link to view the blog article in detail.

### React Example

```javascript
import { builder } from "@builder.io/react";

builder.init(YOUR_KEY);

const ARTICLES_PER_PAGE = 30;
function Blog({ articles, pageNumber }) {
  return (
    <div>
      {articles.map((item) => (
        <Link href={\`/blog/${item.data.handle}\`}><div style={{overflow: "hidden", width:300 }}><div style={{width:300, height:200, display: "block" }}><img src={item.data.image} /></div> {item.data.title}
        {item.data.description}
        </div></Link> ))}
      <div style={{padding:20, width:300, margin: 'auto', display: 'flex' }}> {pageNumber > 1 && (
        <a href={\`/blog/page/${pageNumber-1}\`}> ‹ Previous page</a> )}
      {articles.length > ARTICLES_PER_PAGE && (
        <a href={\`/blog/page/${pageNumber + 1}\`}> Next page ›</a> )}
      </div></div>
  );
}

export async function getStaticProps({ query }) {
  // Get the page number from the path or query parameter// In this example we are hardcoding it as 1
  const pageNumber = 1;
  const articles = await builder.getAll("blog-article", {
    options: { includeRefs: true },
    limit: ARTICLES_PER_PAGE,
    offset: (pageNumber - 1) * ARTICLES_PER_PAGE,
  });

return { props: { articles, pageNumber }};
}

export default Blog;
```

## Blog Article Detail Page

Next, create the Blog article detail page. This page will display the entire content of the blog. This will most likely be located in `pages/blog/[article].jsx`:

```javascript
import { builder, BuilderComponent, BuilderContent, useIsPreviewing } from "@builder.io/react";

builder.init(YOUR_KEY);

function BlogArticle({ article }) {
  const isPreviewing = useIsPreviewing();
  if (!article && !isPreviewing) {
    return (
      <><Head><meta name="robots" content="noindex" /></Head><DefaultErrorPage statusCode={404} /></> );
  }

return (
    <BuilderContent content={article} options={{includeRefs:true }} model="blog-article">
      {(content) => (
        <React.Fragment><Head>
        <title>{content?.data.title}</title>
        <meta name="description" content={content?.data.blurb} />
        <meta name="og:image" content={content?.data.image} />
        </Head><div><div>{content?.data.title}</div>
        <BuilderComponent name="blog-article" content={content} options={{includeRefs:true }} /></div></React.Fragment> )}
    </BuilderContent> );
}

export async function getStaticProps({ params }) {
  const article = await builder
  .get("blog-article", {
    query: {
      "data.handle": params.handle,
    },
  })
  .promise();

return {
    props: {
      article,
    },
  };
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true,
  };
}

export default BlogArticle;
```