Nested pages not loading static files using HOC

Bug report

Describe the bug

The static images in my layout file (Navbar & Footer) will not get loaded when exporting html and navigating into a nested page (pages/products/test.js). But they are loaded when navigating into files directly (pages/*.js).

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Install freshly NextJS
2. Create Layout HOC
3. next build && next export && serve -p 8080
4. localhost:8080 //Images loaded
5. localhost:8080/products/test // HOC images missing

components/Layout.js

const withLayout = Content => {
  return () => (
    <Container>
      <Navbar active={Content.displayName} />
      <Content />
      <Footer />
    </Container>
  );
};

export default withLayout;

pages/index.js

  // IMAGES WILL LOAD HERE (i.e. Logo in Navbar)

  render() {
    return (
      <p>Test</p>
    );
  }
}

Home.displayName = "Home";
export default withLayout(Home);

pages/products/test.js

  // IMAGES SET IN Layout.js WILL NOT BE LOADED
  // test.jpg WILL BE LOADED

  render() {
    return (
      <img src={"../../static/test.jpg"} />
    );
  }
}

Home.displayName = "Home";
export default withLayout(Home);

Expected behavior

Images set in Layout file for Navbar & Footer should be loaded when navigating into a nested page.

Screenshots

[Lokgic]

Ran into the same issue, but nothing here worked for me. At the end, it turned out a div with

height: 100vh;

was causing the issue. Pages are now rendered scrolled to the top after that line is removed.

[doantu-mirabo]

I’ve stuck for two days. My solution is to remove overflow-x: hidden in body, HTML. Check your css such as min-height, overflow …