title: Nested pages not loading static files using HOC
body: <p>By using <a href="https://nextjs.org/" rel="nofollow noreferrer">NextJS</a> I have encountered a problem with the static export command <code>next build &amp;&amp; next export</code>. </p>
  
  <p>I have added the HOC - <code>Layout.js</code> to wrap pages with Navbar and Footer.
  Also I have shallow Pages <code>/pages/*.js</code> and nested pages <code>/pages/products/*.js</code>.</p>
  
  <p>My problem is that Images in the Navbar and Footer are only loaded on the shallow pages, but navigating to <code>/pages/products/test.js</code> breaks the images and they do not display.</p>
  
  <p>This is only happening when exporting and serving static HTML. While developing with <code>npm run dev</code> all images are loaded correctly.</p>
  
  <p><strong>components/Layout.js</strong></p>
  
  <pre><code>const withLayout = Content =&gt; {
    return () =&gt; (
      &lt;Container&gt;
        &lt;Navbar active={Content.displayName} /&gt;
        &lt;Content /&gt;
        &lt;Footer /&gt;
      &lt;/Container&gt;
    );
  };
  
  export default withLayout;
  </code></pre>
  
  <p><strong>pages/index.js</strong></p>
  
  <pre><code>
    // IMAGES WILL LOAD HERE (i.e. Logo in Navbar)
  const Home = () =&gt; {
    render() {
      return (
        &lt;p&gt;Test&lt;/p&gt;
      );
    }
  }
  
  Home.displayName = "Home";
  export default withLayout(Home);
  </code></pre>
  
  <p><strong>pages/products/test.js</strong></p>
  
  <pre><code>
    // IMAGES SET IN Layout.js WILL NOT BE LOADED
    // test.jpg WILL BE LOADED
  const Test = () =&gt; {
    render() {
      return (
        &lt;img src={"../../static/test.jpg"} /&gt;
      );
    }
  }
  
  Home.displayName = "Home";
  export default withLayout(Test);
  </code></pre>