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

【问题标题】：Next.js getInitialProps - dynamic routing does not work in productionNext.js getInitialProps - 动态路由在生产中不起作用
【发布时间】：2019-11-14 23:16:43
【问题描述】：

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

路由在开发模式下可以正常工作，但在生产模式下就不行了。

我明白了：

在预渲染页面“/details/undefined”时发生错误：TypeError: Cannot destruct 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 ）它不起作用。

【问题讨论】：

标签： javascript asynchronous next.js

【解决方案1】：

在/pages 目录中有一个非页面 组件可能会遇到此错误。

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

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

【讨论】：