Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

Create a drag-and-drop editable blog with Next.js

July 22, 2022

Written By Aziz Abbas

Creating your blog with Builder empowers your editors to build exciting blog articles in an intuitive drag-and-drop UI.

Setup

If you like to start with a pre-configured space and codebase, check the full example on github , this article goes through setting up a blog from zero.

If you don't have one already, create an account over at builder.io/signup. It's free!

In this example we are also assuming you are a developer and will be connecting this blog to a custom website or app.

Creating a Blog article model

First, we need to make a model for our blog articles. Here's the how-to:

  1. Go to builder.io/models.
  2. Make a new model by clicking the + Create Model button and choosing Section.
  3. Name the model.
  4. Click the Create button.

5. Next, add some fields. Lots of blog posts usually include the following fields:

NameTypeNotes

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

This is the preview text when listing blog articles, and optionally can be the SEO meta description as well.

Author

reference

Optional

Use this to list info about authors. We recommend making a new data model—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.

The following video shows how to add each of these fields to the model and specify each type. You can define the options of each field, such as default values or whether the field is required, to meet your particular needs. In practice, you might also want to fill in the Helper Text field so editors know the purpose of each field:

The image below shows a still screenshot of these fields in the Blog article model:

Tip: Consider marking some of those options, such as Title, Handle, Image, and Date required so the editor must enter those values to publish.

Connecting the model to a site

Now, you can query your Blog Articles using our Javascript SDK, Content API, or GraphQL API.

Listing articles

To list articles, fetch the articles and render each one; for example, for a page at your-site.com/blog.

Next.js Example

Displaying an article

Next, let's render an individual article.

Next.js Example

Tip: For more detailed instructions on integrating Builder with your site, check out Integrating Sections.

Searching for article

Builder.io API supports Mongodb style query of your data, for example to get a list of articles that has specific text in their title or description, you can do

Adding a preview URL

Once you get the code setup locally, let's connect your local site to the Visual Editor. This will allow for accurate previewing and editing as well as using your custom components directly in the editor.

To do this, go back to builder.io/models, choose Blog Article, and find the preview URL option. Enter a URL that will route on your site to the BlogArticle page, for instance http://localhost:3000/blog/_ (assuming you are using the format /blog/:handle).

Enter in the URL and click Save.

Tip: For more detailed instructions on using a preview URL, check out Editing and Previewing Your Site.

Create a Blog Article

Now you can go to builder.io/content, click + New Entry and choose Blog Article. You should now see the drag and drop editor loaded right onto your local site.

You can now create articles with drag-and-drop and publish them when you're ready.

To create a blog article content entry, do this:

  1. Go to Content where you should see the Blog article model in the list on the left.
  2. Click the + New button and select Blog article. The recommended fields we added in the first section of the tutorial are in the Options tab, ready for you to fill out.
  3. Add some content and publish!

When you publish your site updates to production, make sure to update your editing URL to be a production URL, such as https://your-site.com/blog/_ and no longer localhost so other team members can create blog posts.

And that's it!

We've showed several key features here such as custom models, custom fields, and connecting to your website

If you have any questions, ask in our forum!

Share

Twitter
LinkedIn
Facebook

Continue Reading
Integration4 MIN
The fastest way to build and grow on Headless Salesforce Commerce Cloud
WRITTEN BYAziz Abbas
August 8, 2022
webinar on-demand2 MIN
Digital storytelling in the holiday season
WRITTEN BYJulia Shkrabova
August 3, 2022
Guest Post5 MIN
Personalization wins from Conscia and Builder.io
WRITTEN BYSana Remekie
June 28, 2022

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

INTEGRATIONS

All Integrations

Shopify

React

Angular

Next.js

Gatsby

Salesforce

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

Submit an Idea

PRODUCT

Features

Pricing

© 2022 Builder.io, Inc.

Security

Privacy Policy

Terms of Service