如何在Next js上將數據從快遞服務器發送到客戶端？

Question

我有一個帶有Express的下一個js網絡應用程序。 我想將數據發布到此網頁上，以在服務器上獲取它，並將其傳遞給下一個js頁面。 我是下一個js的新手並表示。 以下是我的server.js代碼：-

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

當我使用get請求時，我可以使用return app.render（req，res，'/ posts'，{name：“ Pritam”}）將數據從服務器發送到客戶端，但是當我嘗試執行相同的操作時發布后，我無法在客戶端上接收任何數據。 最初，我嘗試在查詢參數中傳遞值，並且工作正常。 以下是我的posts.js代碼：-

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;

如@JasperBernales所建議，我對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());
  });

而且我還為api / agreement.js創建了一個目錄，其中包含以下代碼：-

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')
}

我能夠看到我的服務器響應，但是仍然無法在客戶端上獲取它。 我正在嘗試在郵遞員上進行測試。

我想從服務器代碼創建一個端點，以將數據發送到客戶端，並在getInitialProps中接收該數據並將其呈現在客戶端上。 非常感謝您的任何幫助或建議。

Answer 1

nextjs 9支持的檢出api路由

基本上，您需要在pages文件夾下創建一個名為api文件夾。

例如，您在文件夾中有一個名為sample.js的文件

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')
}

那么此文件夾中的每個文件都將稱為路由，您可以在客戶端中將其稱為/api/sample 。