【问题标题】:How to properly configure Next.js as a frontend and Express app as a backend?如何正确配置 Next.js 作为前端和 Express 应用作为后端?
【发布时间】: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 服务器?如何正确执行此操作?

【问题讨论】:

    标签: node.js reactjs express 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 应用程序中有一个服务器文件夹很好?
    猜你喜欢
    • 1970-01-01
    • 2022-12-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-27
    • 2014-09-24
    • 2020-11-27
    相关资源
    最近更新 更多