如何連接 Express 后端和 Next.js 前端？

Question

我修改了我的 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}`));
    });

后端和前端是單獨的文件夾，所以我想同時幫助我解決這個問題。

我的 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

我可以在前端注冊，但沒有數據傳遞到后端。 我的配置有什么問題？

Answer 1

從您的解釋和 package.json 文件來看，您似乎正在創建一個微服務應用程序，其中后端獨立於前端。

但是您的 server.js 文件顯示您正在創建一個單體應用程序，其中前端和后端位於同一實例上。 錯誤消息解釋說，要進行服務器端渲染 (SSR)，它需要 reactjs 庫來渲染前端，不幸的是找不到 reactjs，因為您的后端應該沒有 Z3C797270102480CB4DEZA1207。

如果要創建微服務應用程序，那么前端連接后端的方式是通過 API。 如果你傾向於單體應用，那么你需要閱讀 NextJS 的 SSR 文檔。