# Dynamic Blog Article using Next.JS

**URL:** <https://forum.builder.io/t/dynamic-blog-article-using-next-js/3613>\
**Category:** CMS\
**Tags:** visual-editor, api, nextjs\
**Created:** [May 16, 2023, 8:12pm UTC](https://forum.builder.io/t/dynamic-blog-article-using-next-js/3613 "2023-05-16T20:12:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahmed\_builder](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ahmed_builder/32/2508_2.png) [@ahmed\_builder](https://forum.builder.io/u/ahmed_builder)\
**Post date:** [May 16, 2023, 8:12pm UTC](https://forum.builder.io/t/dynamic-blog-article-using-next-js/3613/1 "2023-05-16T20:12:20Z")

</div>

In this Forum post, I’ll explain how to create a dynamic blog post using Next.js.  
This Paradigm can be applied to any framework.

1-Blog section template  
Create a section model for the blog template.  
Add the slug preview and give it a default value.  
Add the Article preview and give it a default value referencing an Article.  
Make the Preview URL dynamically generated .

```auto
return `http://localhost:3000/blog/${content.data.slugPreview}`

```

For more references on Dynamic Preview URLs, check out this document:

> **[Dynamic Preview URLs - Builder.io](https://www.builder.io/c/docs/dynamic-preview-urls)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

**Create Your Blog Article Template UI using [Builder.IO](http://Builder.IO) CMS**

2- Article and Author model  
 → Create Article and Author data model. Make sure to add ‘slug’ as a custom field in the  
article model.

 ![Screenshot 2023-05-15 at 9.26.48 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d539867ec5c06a3a493cb860453760c046f294d9.png)

**For a quick start, follow the blog article blueprint in The Builder website:**

> **[Blog Article | Builder.io Blueprints](https://www.builder.io/c/blueprints/blog-article)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

3- Create blog/[slug] for dynamic routing in Next.js  
In Next.js app create your dynamic routing: blog/[slug]  
 ![Screenshot 2023-05-16 at 12.45.24 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/f2f23a9e12f28155c28c2d456c0fae3abad96cb4.png)

3- Fetch blog template data and article data using [slug] as params at build time  
Fetch the article data from the data model by querying the slug as the parameter.

```auto
export async function getStaticProps({ 
    params 
}: GetStaticPropsContext<{ slug: string[] }>) {
   const articleData =  
    (await builder
        .get('article',{
        query:{
            'data.slug': params?.slug
        }
     }).toPromise()) || null;

 const articleTemplate = await builder
    .get('blog-template', {
        options: {
            enrich: true,
        },
    }).toPromise();

  return {
    props: {
        articleData,
        articleTemplate   
    },
    revalidate: 5,
  };
}

```

5- Pre-render the Dynamic routes using ` getStaticPaths()`

**fetch all the articles using builder.getAll(model)**

```auto
export async function getStaticPaths() {
  const articles = await builder.getAll('article', {
    options: {noTargeting: true},
    omit: 'data.blocks'
  })

  articles.map(article => console.log(`/blog/${article.data?.slug}`),)
  
  return {
    paths : articles.map(article => `/blog/${article.data?.slug}`),
    fallback: true,
  };
}

```

6- Render `<BuilderComponent />` using blog template populated by the article data

**On The client Side, get the blog template and populate it with article data queried using slug.**

```auto
export default function Page({
     articleTemplate ,
     articleData
    }:InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();
  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }
  const isLive = !Builder.isEditing && !Builder.isPreviewing;

  if (!articleData && isLive) {
    return (
      <>
        <Head>
          <meta name="robots" content="noindex" />
          <meta name="title"></meta>
        </Head>
        <DefaultErrorPage statusCode={404} />
      </>
    );
  }

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        {!articleData && <meta name='robots' content='noindex'/>}
      </Head>
       <BuilderComponent model="blog-template" 
                content={articleTemplate} 
                data={{article: articleData?.data}} 
        />
    </>
  );
}

```

The end result

---

<div class="post-metadata">

**Author:** ![habbeda](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/habbeda/32/2357_2.png) [@habbeda](https://forum.builder.io/u/habbeda)\
**Post date:** [May 18, 2023, 5:02pm UTC](https://forum.builder.io/t/dynamic-blog-article-using-next-js/3613/2 "2023-05-18T17:02:03Z")

</div>

Thanks for sharing your knowledge! As a beginner, I especially appreciate the screenshot and video.

Some feedback:

> [@ahmed\_builder](#):
>
> Create a section template for the blog template.

I personally tapped out here. I wouldn’t know what to do. What blog template? What section template? Are we starting from scratch? Where is my model? Where do I go? Give me a sign.

I would also _love_ to understand the concept of a dynamic preview URL a little better (as opposed to a static one). I’ve posted a thread asking about it [here](https://forum.builder.io/t/do-i-need-a-dynamic-preview-url/3167) but I still don’t really get it. If You could elaborate a bit and explain what the preview URL gives us over a static one in this use case I would be elated.

---

<div class="post-metadata">

**Author:** ![Andreas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/andreas/32/2990_2.png) [@Andreas](https://forum.builder.io/u/Andreas)\
**Post date:** [October 27, 2023, 10:40pm UTC](https://forum.builder.io/t/dynamic-blog-article-using-next-js/3613/3 "2023-10-27T22:40:39Z")

</div>

Hi I know this is a late response but, what you need to do in step one is create a Section Model called “blog-template” and add fields slugPreview (type: text) and articlePreview (type: reference). After you’ve created the model, create an entry using the blog-template model you just made and give it a dynamic url using this javascript:

```auto
return `http://localhost:3000/blog/${content.data.slugPreview}`

```

What this does is populates the preview url with the value from the section’s slugPreview field and allows you to preview articles with specific slugs in the visual editor.

Hopefully you should be able to finish the example with this information. If you have any other questions feel free to respond here.