如何在自定义 Express 服务器上呈现 Next JS 页面

Question

我正在做一个 NextJS 项目，我需要在服务器上加载一个表单，以便能够上传文件，为此我在自定义服务器中使用了 multer 和 express。

现在根据 GET 请求，我想呈现特定页面，但我不确定如何执行此操作。我不想在服务器中有任何 html，只是对页面的调用。这甚至可能吗？

server.get('/', (req,res) => {
  res.send(ReactDOMServer.renderToString(<myPage />))
});

当我启动服务器时，我得到以下信息：

/Users/MONOLITH-Strat-Audrey/Projects/sandbox/multer-file-upload/server.js:41

res.send(ReactDOMServer.renderToString(<myPage />))

^

SyntaxError: Unexpected token <

在服务器中我是这样调用页面的，显然是行不通的。

const myPage = require('./pages/index')

作为参考，这是我的 github 所有代码。 Github Repo

Answer 1

您的代码中存在多部分错误。

切勿在 server.js 或节点入口点文件中导入 React 组件。
所有页面都应位于 pages 目录中，以便 Next.js 解析并提供服务。

下面是所做的更改，它开始工作

从 server.js

的行下方删除或评论

const myPage = require('./pages/index')

在第 48 行 - server.js

  server.get('/',function(req,res){
    // res.write(ReactDOMServer.renderToString(<myPage />))
    return app.render(req, res, '/', query)
  });

在你的 components/file.js render 方法中 return jsx

class File extends Component {
  render() {
    return (<form action="/uploadfile" enctype="multipart/form-data" method="POST"> 
      <input type="file" name="myFile" />
      <input type="submit" value="Upload a file"/>
    </form>)
  }
}

使用 Next.js

的自定义服务器参考

SSR Next.js - https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering
Next.js 自定义服务器 - https://nextjs.org/docs/advanced-features/custom-server
自定义服务器示例 - https://github.com/zeit/next.js/tree/canary/examples/custom-server

如何在自定义 Express 服务器上呈现 Next JS 页面

How to render Next JS page on a custom Express server

express

reactjs

multer

next.js

下面是所做的更改，它开始工作

使用 Next.js