嵌套页面不使用 HOC 加载静态文件

Question

通过使用NextJS，我遇到了静态导出命令next build && next export 的问题。

我添加了 HOC - Layout.js 以使用导航栏和页脚包装页面。 我也有浅页 /pages/*.js 和嵌套页 /pages/products/*.js。

我的问题是导航栏和页脚中的图像仅加载在浅页上，但导航到 /pages/products/test.js 会破坏图像并且它们不会显示。

这仅在导出和提供静态 HTML 时发生。在使用npm run dev 开发时，所有图像均已正确加载。

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);

Answer 1

我通过创建和覆盖文件./pages/_app.js 解决了这个问题。它现在居住在那里的布局，不会在重定向时重新呈现。

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;