Create a blog in 5 mins
25/9/2015
API

Create a blog in 5 minutes using Next.js, Vercel, and a CMS

Leveraging the power of a CMS you can build pages very fast with little to no code at all. With nextjs and Vercel we can quickly pump out SSG ready pages for your website. Vercel comes into play on a couple areas to easily get started with the per blog setup for your website. To get started with the blog pages you will 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.

vercel.com domain page with multiple domains

Project setup and configuration

The following example will bring a nextjs 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.

```sh

middleware.ts
/pages
/blog
[[...slug]].tsx
/lib
get-blog.ts
/components
/blog
blog-page.tsx

```


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:


```sh

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.

```sh

import { NextResponse, NextRequest, userAgent } from 'next/server'

import { IFRAME_URL } from './configs/api-route'


export async function middleware(req: NextRequest) {

let res = NextResponse.next()


if (

req.headers?.get('host')?.endsWith('.blog') ||

req.nextUrl.pathname.startsWith('/blog')

) {

const url = req.nextUrl.clone()

url.pathname = `/blog${req.nextUrl.pathname}`

res = NextResponse.rewrite(url)

}


return res

}


export const config = {

matcher: [

'/',

'/blog',

'/blog/:path*',

'/categories/:path*',

'/authors/:path*'

],

}

```

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 https://a11ywatch.blog.We also created a package that you can use to build out the pages with very little code requirements needed at https://github.com/j-mendez/next-wordpress.

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 am the founder and creator of A11yWatch.