如何在快速路由中设置 nextjs 渲染？答案

【问题标题】：How to set up Next.js render in Express routing?如何在快速路由中设置 nextjs 渲染？
【发布时间】：2021-06-26 22:04:03
【问题描述】：

app.js

const express = require('express');
const next = require('next');
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';

const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    const indexRouter = require('./routes/indexRouter');

    server.use(indexRouter);
    server.all('*', (req, res) => {
      return handle(req, res);
    });

    server.listen(port, (err) => {
      if (err) throw err;
      console.log('> Ready on http://localhost:' + port);
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

indexRoutes.js

const express = require('express');
const router = express.Router();
const userController = require('../controllers/user');

router.post('/api/signup', userController.signup);

我想通过 indexRoutes.js 中的 nextjs 渲染组件。我见过其他人在主 app.js 中做的

server.get('/login', (req, res) => {
  app.render(req, res, '/login');
});

但我不明白如何在单独的文件中执行此操作。我尝试这样做，但没有结果。

indexRoutes.js

const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const router = express.Router();
const userController = require('../controllers/user');

router.post('/api/signup', userController.signup);
router.get('/login', (req, res) => {
  return app.render(req, res, '/login'); // this does not work
});

我该如何解决我的问题？

【问题讨论】：

@juliomalves 没有错误，但 url /login 会无休止地加载。
@Лукас 你导出控制器方法了吗？根据您提供的代码，我了解到您已经创建了注册控制器。
@FahimHoque 控制器很好。我遇到路由/登录问题，无法渲染 React 组件
@juliomalves 是的，您的建议对我有帮助，谢谢，抱歉让您久等了。

标签： node.js express routes next.js

【解决方案1】：

如果您想将路由放在单独的文件中，您可以创建以下indexRouter.js 文件：

// routes/indexRouter.js

const userController = require('../controllers/user');

const indexRouter = (server, app) => {
    server.post('/api/signup', userController.signup);
    server.get('/login', (req, res) => {
        return app.render(req, res, '/login');
    });
};

module.exports = indexRouter;

然后，您可以从 app.js 请求它并将 server 和 app 对象传递给它。

// app.js

// ...

app
    .prepare()
    .then(() => {
        const server = express();

        const indexRouter = require('./routes/indexRouter');

        indexRouter(server, app)
        
        server.all('*', (req, res) => {
            return handle(req, res);
        });

        server.listen(port, (err) => {
            if (err) throw err;
            console.log('> Ready on http://localhost:' + port);
        });
    })
    .catch((ex) => {
        console.error(ex.stack);
        process.exit(1);
    });

【讨论】：