Question

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

我添加了HOC-Layout.js，以用Navbar和Footer包装页面。我也有浅页/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);

页面/产品/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;

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

1 个答案: