如何正确配置 Next.js 作为前端和 Express 应用作为后端？

Posted 2023-02-22

【中文标题】如何正确配置 Next.js 作为前端和 Express 应用作为后端？

【英文标题】：How to properly configure Next.js as a frontend and Express app as a backend?

【发布时间】：2021-01-02 23:15:57

【问题描述】：

目前我有前端的 create-react-app 和后端的 express 服务器。在我的 create-react-app 的 package.json 中，我使用像 "proxy": "http://localhost:5000" 这样的代理。 我需要使用相同的快速服务器为 Next.js 应用程序实现相同的目标。

我只是希望能够使用我的 express 服务器而不是 Next.js 中构建的 API 路由，并像在 create-react-app 中那样代理它。

即使我没有更改任何功能，我是否需要创建自定义 Next.js 服务器？如何正确执行此操作？

【参考方案1】：

是的，你必须在下一个 js 中添加自定义服务器

安装 express js 然后在下一个 js 项目的根目录下添加文件 server.js

const express = require('express')
const next = require('next')
const bodyParser = require('body-parser')

const dev = process.env.NODE_ENV !== 'production'
const app = next( dev )
const handle = app.getRequestHandler()

app.prepare().then(() => 
  const server = express()

  server.use(bodyParser.json())
// add custom path here
// server.post('/request/custom', custom);

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

  server.listen(3000, (err) => 
    if (err) throw err
    console.log('Ready on http://localhost:5000')
  )
)

之后更改 package.json 文件脚本部分

"scripts": 
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js",
 

【讨论】：

谢谢，它有效。但是像快速刷新这样的 Next.js 功能呢？仅仅因为我有我的自定义快递服务器，我就失去了所有这些？

你试过了吗？快速刷新和所有其他功能都在工作。 app = next( dev ) 常量句柄 = app.getRequestHandler();这些行将在快速服务器中添加下一个设置

这是我的错，我使用 nodemon 而不是 node。谢谢！

如果你还在这里，我还有一个问题。您认为将我的 API 和 Next.js 应用程序作为一个服务器（一个文件）是否很好？我的意思是有一个问题，例如我无法在 getStaticProps() 中调用我的内部 API（构建中断）。但是，如果我为我的 express API 在不同的端口上运行单独的服务器，那将没有问题。您对此有何看法？

@Mimoid 在完全不同的空间运行后端是个好主意吗？还是在 nextjs 应用程序中有一个服务器文件夹很好？