用keystonejs插入nextjs

时间:2018-11-28 10:03:59

标签: reactjs keystonejs next.js

我正在尝试用keystone js插入nextjs,这表明我可以将reactjs用于前端,并将keystonejs用作CMS,但是它不起作用。我正在按照教程进行操作,尽管它可以在教程中使用,但是我不知道为什么在我的情况下它不起作用。

tutorial website

这是我尝试配置的方式。

  

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);
    });
}; 
  

文件夹结构

enter image description here

  

访问localhost:3000后的结果

enter image description here

1 个答案:

答案 0 :(得分:0)

https://medium.com/@victor36max/how-to-build-a-react-driven-blog-with-next-js-and-keystonejs-cae3cd9fb804

教程网站上说

应该显示Next.js 404页面,而不是KeystoneJS页面。

让我们尝试使用Next.js制作页面。

在pages文件夹中,新建一个文件index.js。

所以您可以保持它。