Create a Blog in 5 Minutes using Next.js, Vercel, and a CMS


By leveraging the power of a CMS, you can build pages very quickly with little to no code. With Next.js and Vercel, we can easily generate SSG-ready pages for your website. Vercel makes it simple to set up a blog section for your website. To get started with the blog pages, you'll need to create two routes in a folder called blog. Below is a picture showing multiple domains on Vercel and using a middleware (optional) to route to the appropriate paths.

Project Setup and Configuration

The following example will use a Next.js app to utilize WordPress or Webflow in order to build SSG content across all pages free. The middleware is optional but highly recommended to separate the blog via DNS.

# folders

The Blog Component

Create a blog component to render the meta tags that return as props in the `getStaticProps` . Inside the BlogPage component we use html-react-parser to render the body of the blog page. Take a look at the short example below:

import { getBlogPage } from '@app/lib/get-blog'
import { BlogPage } from '@app/components/blog/blog-page'
import type { GetStaticProps } from 'next'

export default function Blog(props:) {
    return <BlogPage {...props} />

export const getStaticProps: GetStaticProps = async (context) => {
    const { slug } = context.params ?? {}
    const websiteUrl = Array.isArray(slug) ? slug : []

    let props = {}

    try {
        props = await getBlogPage(websiteUrl.join('/'))
    } catch (e) {

    return {
        revalidate: 3600 * 4, // every 4 hours

Parsing via node-html-parser

The getBlogPage method uses node-html-parser to extract all links, styles, scripts, and meta tags into a js array of objects with the following keys. The idea is to remove the content that you do not need from blog and parse it out with the new HTML. You can opt into using puppeteer to get the HTML content if your content requires javascript to render. You can see the full example on github.

Middleware setup

With nextjs middlewares we can use rewrites to use one project and template custom headers and footers to the blog page.

The `config` export is critical for controlling the flow of the rest of the assets to render correctly SSG. It is best to add the exact paths so nextjs can build the routes during compilation. If you share assets between the repo you can leave out the public folder from the routes.


With the above you should be able to create your next blog page fully for free using vercel and wordpress. For a full example of the code check out the web project to see an example. The current implementation is used to power our blog at {{blogURL}}.ps: I would post more of the code directly if wordpress Elementor did not auto format the content after every other saved post.

Jeff Mendez

My name is Jeff and I enjoy to build things and fishing on my downtime.

Related Post

Stay inclusive with confidence

Get started with A11yWatch now for affordable and speedy automated web accessibility tools.