title: How to render server side react content with NextJS and React Router?
body: <p>I need to render my React app from the server side. For that, i am using the framework next.js. But i am facing two issue.</p>
  
  <p>First, i need to serve my app dynamically. That means i need a server side router to display my react components according to the current url. </p>
  
  <p>Then, i need to load some dynamic data before render my components. So i need to pass these data from node to my react component.</p>
  
  <p>this is my current situation :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// In Node.js
  
  app.get("/",function(req,res){
  
    return app.prepare()
      .then(() =&gt; handle(req, res))
      .catch(ex =&gt; {
        console.error(ex.stack)
        process.exit(1)
      })
  })
  
  //In React.js
  
  import React from 'react'
  export default class Index extends React.Component{
   
    render(){
      return(
        &lt;div&gt;
          &lt;p&gt;Hello Server Side Rendered React App from Google Cloud Front&lt;/p&gt;
          
        &lt;/div&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>So , What should i do ?</p>