plugging nextjs with keystonejs - reactjs

Question

I am trying to plug nextjs with keystone js show that i can use reactjs for frontend and keystonejs as CMS but It's not working. I was following a tutorial to do so although it worked in tutorial but i don't know why its not working in my case.
tutorial website
This is how i tried to configure.
keystone.js
// Simulate config options from your production environment by
// customising the .env file in your project's root folder.
require('dotenv').config();
// Require keystone
const keystone = require('keystone');
//var handlebars = require('express-handlebars');
//Next app
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
// Initialise Keystone with your project's configuration.
// See http://keystonejs.com/guide/config for available options
// and documentation.
keystone.init({
'name': 'cmsblog',
'brand': 'cmsblog',
// 'sass': 'public',
// 'static': 'public',
// 'favicon': 'public/favicon.ico',
// 'views': 'templates/views',
// 'view engine': '.hbs',
// 'custom engine': handlebars.create({
// layoutsDir: 'templates/views/layouts',
// partialsDir: 'templates/views/partials',
// defaultLayout: 'default',
// helpers: new require('./templates/views/helpers')(),
// extname: '.hbs',
// }).engine,
'auto update': true,
'session': true,
'auth': true,
'user model': 'User',
});
//Load your project's Models
keystone.import('models');
// Setup common locals for your templates. The following are required for the
// bundled templates and layouts. Any runtime locals (that should be set uniquely
// for each request) should be added to ./routes/middleware.js
app.prepare()
.then(() => {
// keystone.set('locals', {
// _: require('lodash'),
// env: keystone.get('env'),
// utils: keystone.utils,
// editable: keystone.content.editable,
// });
// Load your project's Routes
keystone.set('routes', require('./routes'));
// Configure the navigation bar in Keystone's Admin UI
keystone.set('nav', {
posts: ['posts', 'post-categories'],
galleries: 'galleries',
enquiries: 'enquiries',
users: 'users',
});
// Start Keystone to connect to your database and initialise the web server
keystone.start();
})
Routes.js
const keystone = require('keystone');
exports = module.exports = nextApp => keystoneApp => {
//setup Route Bindings
const handle = nextApp.getRequestHandler();
keystoneApp.get('/api/posts', (req,res,next) => {
const Post = keystone.list('Post');
Post.model
.find()
.where('state', 'published')
.sort('-publishedDate')
.exec(function(err, results) {
if(err) throw err;
res.json(results);
});
});
keystone.get('*', (req,res) => {
return handle(req,res);
});
};
folder structure
result after visiting localhost:3000

Answer 1

https://medium.com/#victor36max/how-to-build-a-react-driven-blog-with-next-js-and-keystonejs-cae3cd9fb804
The tutorial website says
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 .
So you can keep it up.