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.