Preview in data models

General
8

I see, ok then yes that should be pretty straight forward!

NextJS should be able to handle all the routing, so you shouldn’t need to worry about the 100 various entries. Are you using directory and bracket notation for NextJS? Your blog page is at directory of something like app/blog/[slug].js ?

Your code would then look something like this:

builder.init(BUILDER_API_KEY)

export async function getStaticProps({params}){
  
  const blogData =
    (await builder
      .get('blog-model', {
        query: {
          'data.slug': params?.slug,
        },
      })
      .toPromise()) || null

  return {
    props: {
      blogData
    }
  }
}
...

export default function BlogPost({blogData}) {
  ...
  return (
    <BuilderContent content={blogData} model="blog-model" options={{ includeRefs: true }}>
      {(data, loading, content) => {
          <Title>{blog.data.title}</Title> 
          ...
      }
    </>
  )
}

So that you are dynamically showing and displaying the page based on the slug and you have the ability to view your preview within Builder. Just make sure that you also set the editing URL in the data model entry to be the path of where these blogs will live… Blog - YourSite.com

You can see more about adding dynamic URLs as well here: Using Advanced Editing URL Logic to set up dynamic preview URLs