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

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
middleware.ts
/pages
/blog
[[...slug]].tsx
/lib
get-blog.ts
/components
/blog
blog-page.tsx

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) {
        console.error(e)
    }

    return {
        props,
        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.

Overview

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.

Related Post