CODEWITHSUNDEEP
javascriptreactjsnext.js
nixn
nixn

Reputation: 1488

Nested pages not loading static files using HOC

By using NextJS I have encountered a problem with the static export command next build && next export.

I have added the HOC - Layout.js to wrap pages with Navbar and Footer. Also I have shallow Pages /pages/*.js and nested pages /pages/products/*.js.

My problem is that Images in the Navbar and Footer are only loaded on the shallow pages, but navigating to /pages/products/test.js breaks the images and they do not display.

This is only happening when exporting and serving static HTML. While developing with npm run dev all images are loaded correctly.

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)
const Home = () => {
  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
const Test = () => {
  render() {
    return (
      <img src={"../../static/test.jpg"} />
    );
  }
}

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

Upvotes: 1

Views: 1565

Answers (1)

nixn
nixn

Reputation: 1488

I solved this by creating & overwriting the file ./pages/_app.js. The Layout it now living there and will not be rerendered on a redirect.

import React from "react";
import App, { Container } from "next/app";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

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

    return { pageProps };
  }

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

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

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

export default MyApp;

Upvotes: 1

Related Questions