Build a React-driven blog with Next.js and KeystoneJS

KeystoneJS is one of the best choices among all Node.js CMS frameworks. With its own generator command line tool, it handles all of the models generation, database connection and gives you an auto-generated admin interface. It is also highly customisable so you can make your own type of model to suit your own need. However on frontend it uses its own template engines and React is not built-in into this framework.

Next.js is a popular React SSR (Server Side Rendering) framework which allows you to build an SEO friendly React website with minimal configuration. With server side rendering, you can set SEO meta tags on the server before returning to the client. So search engine can crawl the data without running any Javascript, which is especially important for blogs and news websites.

This tutorial is about harnessing the strengths of both frameworks, integrating them together to build a fully-powered blogging/news website.

Prerequisites:

• node & npm are installed

Install KeystoneJS

First install mongoDB & get it running. I use a Mac so here is an example of installing it with Homebrew.

brew install mongodb
brew services start mongodb

Then in your project root, install KeystoneJS with Yeoman generator

npm install yo -g 
npm install -g generator-keystone 
yo keystone

Here is an example of the steps of setting up KeystoneJS.

Choosing template engine & CSS pre-processor is not important since we are going to remove all the front end components of KeystoneJS later on.

Then you should see a folder structure like this in your project root.

Try running it with

node keystone

A keystone landing should show up on localhost:3000 and your keystone app is set up.

Remove frontend components of KeystoneJS and plug in Next.js

Install React, Next.js & axios (for network request).

npm install next react react-dom axios --save

Then in your project root, remove folders templates & public and the files inside.

Replace with folders pages , components & static to contain Next.js & React files.

Now your folder structure should look like this.

Next, in keystone.js , initialise Next.js app object.

And wrap Keystone.js configuration inside Next.js app prepare block.

You would need to pass Next.js app into routes so we can set up routes with Next.js later on.

keystone.set('routes', require('./routes')(app));

After removing KeystoneJS frontend code, your keystone.js should look like this.

Then in routes folder, remove views folder and middleware.js since we are not going to use any of these files. We only keep index.js in routes folder.

In routes/index.js , here is an example of configuration. There is a /api/posts endpoint to fetch posts from KeystoneJS and the rest of the routes will be handled by Next.js.

After having keystone.js & routes/index.js set up, you could try to run node keystone again.

A Next.js 404 page should show up instead of KeystoneJS page.

Let’s try to make a page with Next.js.

In pages folder, make a new file index.js .

And run node keystone again.

Hello world shows up and Next.js is successfully plugged in with KeystoneJS.

Implementing Next.js frontend

First log into the admin panel http://localhost:3000/keystone and make some posts so there is data to show.

Then in pages folder, make a new file _document.js . In here we can import Bootstrap or any other third party frontend libraries.

In pages/index.js . You can fetch the posts in Next.js method getInitialProps() and return as props. Then you can use the data & render the posts in React.

So here we are, the posts show up on localhost:3000!

We have integrated KeystoneJS & Next.js and successfully built a simple blog. Both these two frameworks are sophisticated so you can use them to build more complicated websites.

The whole example project is hosted on github.

https://github.com/victor36max/keystone-next-example