javascript - Next.js getInitialProps - 动态路由在生产中不起作用

Question

我使用 Next.JS 版本 9.1.3 并在我的项目中具有动态路由(但带有 exportPathMap 的静态文件)。

路由在开发模式下工作正常，但在生产模式下不起作用。

我得到:

Error occurred prerendering page "/details/undefined": TypeError: Cannot destructure property baseDetails of 'undefined' or 'null'.

import { Component } from 'react';
import getLocks from '../../data/helper/getLocks';
import PageTemplate from '../../components/PageTemplate';
import RenderLock from '../../components/RenderLock';

class details extends Component {
  static async getInitialProps({ query }) {
    return { lock: getLocks().find((el) => el.id === query.lockID) };
  }

  render() {
    const { lock } = this.props;

    return (
      <PageTemplate>
        <div>
          <RenderLock lock={lock} />
        </div>
      </PageTemplate>
    );
  }
}
export default details;

RenderLock 使用这个:

const { baseDetails } = lock;

正如我所说，在开发模式下它工作得很好。 baseDetails 已存在。

但在生产模式下(如果我执行了 next build 和 next export )，它不起作用。

Answer 1

如果 /pages 目录中存在非页面组件，则可能会遇到此错误。

您可以尝试将 details.js 文件移动到 ../../components，这样它就不会被识别为静态页面。

这种类型的错误仅在 next-build 执行 Automatic Static Optimization 步骤时可见。 。相同的代码在开发模式下执行良好。