如何连接 Express 后端和 Next.js 前端?

时间:2021-01-06 12:23:40

标签: node.js express next.js

我修改了我的 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

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

1 个答案:

答案 0 :(得分:1)

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

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

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