node.js - How to connect Express backend and Next.js frontend?

Question

I modified my server.js(by looking at Vercel site)

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

Backend and frontend are separate folders,so I figured out that concurrently help me solve this.

My 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"
  },

I got error

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

I can signup at the frontend but no data is passed to the backend. What is wrong with my configuration?

Answer 1

From your explanation and package.json file, it seems you were creating a microservices application where the backend standalone from the frontend.

But your server.js file shows that you were creating a monolithic application where the frontend and backend is on the same instance. The error message explains that to do Server Side Rendering (SSR), it needs reactjs library to render the frontend, unfortunately couldn't find reactjs because your backend supposed to not having reactjs.

If you want to create microservices application, then the way frontend connect to backend is via APIs. If you tend to have monolithic application, then you need to read the SSR documentation of NextJS.