如何连接 Express 后端和 Next.js 前端？答案

【问题标题】：How to connect Express backend and Next.js frontend?如何连接 Express 后端和 Next.js 前端？
【发布时间】：2021-01-07 10:03:46
【问题描述】：

我修改了我的 server.js（通过查看 Vercel 站点）

connectDB();
const routes = require('./routes');
const blogpost = require('./routes/blogpost');
const auth = require('./routes/auth');
const users = require('./routes/users');
const comments = require('./routes/comments');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handler = routes.getRequestHandler(app);

app.prepare()
    .then(() => {
        const server = express();
        server.use(handler);
        server.use(express.json());
        server.use(cookieParser());
        server.use(mongoSanitize());
        server.use(helmet());
        server.use(xss());

        if (process.env.NODE_ENV === 'development') {
            server.use(morgan('dev'));
        }

        const limiter = rateLimit({
            windowMs: 10 * 60 * 1000,
            max: 100,
        });
        server.use(limiter);

        server.use(hpp());

        server.use(cors());

        server.use('/api/v1/auth', auth);
        server.use('/api/v1/blogpost', blogpost);
        server.use('/api/v1/users', users);
        server.use('/api/v1/comments', comments);

        const PORT = process.env.PORT || 5000;

        server.listen(PORT, console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`));
    });

后端和前端是单独的文件夹，所以我想concurrently 帮我解决了这个问题。

我的 package.json

  "scripts": {
    "start": "node server",
    "client": "cd ..//frontend && npm run dev",
    "server": "nodemon server",
    "dev": "concurrently --kill-others-on-fail \"npm run client\" \"npm run server\"",
    "test": "jest"
  },

我有错误

internal/modules/cjs/loader.js:1083
[1]   throw err;
[1]   ^
[1] 
[1] Error: Cannot find module 'react'
[1] Require stack:
[1] - /home/jholmes/blog_mongo/backend/node_modules/next/dist/next-server/server/render.js
[1] - /home/jholmes/blog_mongo/backend/node_modules/next/dist/next-server/server/nextserver.js

 [nodemon] app crashed - waiting for file changes before starting...
[0] ready - started server on http://localhost:3000
[0] event - compiled successfully

我可以在前端注册，但没有数据传递到后端。我的配置有什么问题？

【问题讨论】：

标签： node.js express next.js

【解决方案1】：

从您的解释和 package.json 文件来看，您似乎正在创建一个微服务应用程序，其中后端独立于前端。

但是您的 server.js 文件显示您正在创建一个单体应用程序，其中前端和后端位于同一实例上。错误消息解释说，要进行服务器端渲染 (SSR)，它需要 reactjs 库来渲染前端，不幸的是找不到 reactjs，因为您的后端应该没有 reactjs。

如果您想创建微服务应用程序，那么前端连接到后端的方式是通过 API。如果你倾向于单体应用，那么你需要阅读 NextJS 的 SSR 文档。

【讨论】：