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

时间:2020-03-18 15:59:59

标签: reactjs express next.js multer

我正在研究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:意外令牌<< / p>

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

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

供参考,这是我所有代码的github。 Github Repo

1 个答案:

答案 0 :(得分:2)

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

  • 切勿将React组件导入 server.js 或节点入口点文件中。
  • 所有页面应位于 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方法中返回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的自定义服务器的参考