如何使用NextJS和React Router呈现服务器端反应内容?

我需要从服务器端渲染我的React应用程序。 为此,我使用了next.js框架。 但是我面临着两个问题。

首先,我需要dynamic地提供我的应用程序。 这意味着我需要一个服务器端路由器根据当前的url显示我的反应组件。

然后,我需要在渲染我的组件之前加载一些dynamic数据。 所以我需要将这些数据从节点传递给我的反应组件。

这是我目前的情况:

// In Node.js app.get("/",function(req,res){ return app.prepare() .then(() => handle(req, res)) .catch(ex => { console.error(ex.stack) process.exit(1) }) }) //In React.js import React from 'react' export default class Index extends React.Component{ render(){ return( <div> <p>Hello Server Side Rendered React App from Google Cloud Front</p> </div> ) } } 

所以我该怎么做 ?

如果您在React中使用NextJs,则不需要react-router来创build页面,这很容易,您需要创build一个名为index.js的组件的目录,它们具有pipe理导航的组件等等。

看一下GitHub文档,他们已经很好地涵盖了这些步骤。

https://zeit.co/blog/next2

快速示例:

 // pages/index.js import Link from 'next/link' export default () => ( <div>Click <Link href="/about"><a>here</a></Link> to read more</div> ) // pages/about.js export default () => ( <p>Welcome to About!</p> )