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

Setup

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

/pages
/blog
_middleware.ts
index.tsx
[...slug].tsx
/lib
get-blog.ts
/components
/blog
wordpress-page.tsx

```

The links above will help create the files for wordpress & nextjs. The current page handling is set to manipulate the Polite Theme in order to remove extras that are not required. The idea is to remove the content that you do not need from wordpress and return it back your  content. You can opt into using puppeteer if your content requires javascript to build so you can have the html already established before hand. The nice part about the middleware aspect is that if rewrite the url on the server the blog path is never exposed where it looks like a clean url. You can even leverage tools like puppeteer to pre-build the resources on your server.

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.