Next.js: Nested pages not loading static files using HOC

[NikoMontana]

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

[NikoMontana]

In case somebody wants to know the solution:

https://stackoverflow.com/questions/56668197/nested-pages-not-loading-static-files-using-hoc/56707135#56707135

[NikoMontana]

This breaks the <Link/> function and the pages will persist scroll state - not scrolling to top!

I have tried this solution, but it is not working

_app.js

import React from "react";
import App, { Container } from "next/app";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Router from "next/router";
import * as gtag from "../helpers/gtag";

class MyApp extends App {
  constructor(props) {
    super(props);
    this.navbar = React.createRef();
    this.handleRouteChange = this.handleRouteChange.bind(this);
  }

  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  componentDidMount() {
    Router.events.on("routeChangeComplete", this.handleRouteChange);
  }

  handleRouteChange = url => {
    gtag.pageview(url);
    // this.navbar.scrollIntoView(true);
    window.scrollTo(0,0);
  };

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Navbar
          active={Component.displayName}
          ref={e => {
            this.navbar = e;
          }}
        />
        <Component {...pageProps} />
        <Footer />
        <style jsx global>{`
          html,
          body,
          #__next {
            height: 100%;
            width: 100%;
            margin: 0;
            font-family: "Catamaran", sans-serif;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
          }

          body {
            position: relative;
          }
        `}</style>
      </Container>
    );
  }
}

export default MyApp;

[NikoMontana]

#6462 & #5313

[NikoMontana]

Very dirty solution here:

Edit: Works also only for a not fixed navbar.

_app.js

  componentDidUpdate() {
    this.navbar.scrollToTop();
  }

<Navbar active={Component.displayName} ref={e => (this.navbar = e)} />

Navbar.js

  scrollToTop() {
    this.navbar.scrollIntoView(true);
  }

      <Holder
        ref={e => {
          this.navbar = e;
        }}
      >...</Holder>

[NikoMontana]

The solution to this was very simple. Remove html, #__next from <style jsx global> inside _app.js.

[MiguelTolosa]

@NikoMontana thank you so much for the update! I'd been struggling with this issue for days and removing html from an imported global styles.css file fixed the scrolling issues.

[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.

[SergiiMost]

I had the same issue when my page would not render at the top. In my case in my global.css i had this:

html { font-size: 62.5%; scroll-behavior: smooth; }

After removing scroll-behavior: smooth; everything started working as expected.

[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 ...