How to send data from express server to client on Next js?

Question

I have a next js web app with express. I want to post data to this webpage fetch it on my server and pass it on to my next js page. I am new to next js and express. Following is my server.js code:-

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()

  server.use(express.json());

  server.post("/posts", (req, res) => {
    req.body.data
    console.log("Post data : ",req.body.data)
    console.log("JSON Response : ",res.json());
  });

  // server.get('/posts/', (req, res) => {
  //   console.log("Post data again : ",res.body.data)
  //   return app.render(req, res, '/posts', { id: "Pritam" })
  // })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

When I use get request I am able to send data from my server to the client using return app.render(req, res, '/posts', { name: "Pritam" }) but when I try to do the same thing with post I am not able to receive any data on my client. Initially, I have tried passing values in query params and it works fine. Following is my posts.js code:-

import React, { Component } from 'react'

class Posts extends Component {
  static async getInitialProps ({ query: { id } }) {
    console.log("Response is ")
    return { postId: id }
  }
  render () {
    return (
      <div>
        <p>Post data {this.props.postId}</p>
      </div>
    )
  }
}


export default Posts;

As suggested by @JasperBernales I made the following changes to my server.js:-

  server.post("/api/agreement", (req, res) => {
    req.body.data
    res.send("ESAnup")
    console.log("Post data agreement: ",req.body.data)
    console.log("JSON Response agreement : ",res.json());
  });

And I have also created a directory for api/agreement.js which contains the following code:-

export default function handle(req, res) {
  console.log("Request Body",req.body.data) // The request body
  console.log("Request Query :",req.query) // The url querystring
   console.log(req.cookies) // The passed cookies
   res.json({ title: 'Hello World JSON' })
   res.end('Hello World')
}

I am able to see my server response but I am still not able to fetch it on my client. I am trying to test it on Postman.

I would like to create an endpoint from my server code to send data to my client and receive that data in getInitialProps and render it on my client side. Any help or suggestion is much appreciated.Thank you.

Answer 1

checkout api routes supported in nextjs 9.

Basically you need to create a folder named api under pages folder.

example you have a file named sample.js inside the folder

export default function handle(req, res) {
  console.log(req.body) // The request body
  console.log(req.query) // The url querystring
  console.log(req.cookies) // The passed cookies
  res.end('Hello World')
}

then each file inside this folder will be called as route and you can call it as /api/sample in your client.