如何在同一 localhost 端口上使用 Express 服务器后端托管 NextJS 应用程序答案

【问题标题】：How to host NextJS app with an Express server backend on same localhost port如何在同一 localhost 端口上使用 Express 服务器后端托管 NextJS 应用程序
【发布时间】：2021-09-20 02:04:11
【问题描述】：

我正在尝试将使用 React 构建的 NextJS 应用程序托管在与我的 express api-server 后端相同的本地主机端口上。

在我的快速服务器 api 设置中，我已将我的 api 服务器设置为监听：

http://localhost:3000/graphql

我该如何设置，这样当我转到localhost:3000 时，我也可以看到前端。

现在我收到一个错误：

Cannot GET /

我知道我不能使用 "proxy":"localhost:3000/graphql" 如何使用 NextJS 做到这一点？

【问题讨论】：

你要么使用内置的Next API Routes，要么你必须创建一个Custom Express Server

标签： javascript reactjs express next.js

【解决方案1】：

您可以在next.config 中使用rewrites 键：

module.exports = {
  async rewrites() {
    return [
      process.env.NODE_ENV === 'development' && {
        source: '/graphql',
        destination: 'localhost:3000/graphql',
      },
    ].filter(Boolean);
  },
}

只需在任何其他端口上启动 Next.js，所有对 /graphql 的请求都将被重定向到 localhost:3000/graphql

【讨论】：