reactjs - 如何在 nextjs 中添加全局组件列表

Question

我是 Nextjs 的新手，我想将组件和实用程序列表添加到 Nextjs 中的所有页面。如何在不一一导入的情况下使它们在我的组件中全部可用。
getInitialProps 中可能还需要一些实用程序。在像 axios 这样的页面中起作用或者在我的情况下 client的 Apollo .

我不希望有人给我写一个完整的配置文件 Nextjs.config只是帮助我更深入地了解下一个配置。

提前致谢

Answer 1

我建议在每个页面上为每个组件和实用程序进行动态导入，而不是使组件全局化。通过这样做，Next.js 将创建一个没有任何未使用组件的小块或“页面”。

如果您全局加载组件，每个页面的大小都会增加，但实际上不会使用这些组件或实用程序。 它破坏了代码拆分的目的 .

它破坏了代码的模块化 ，因为组件/页面(模块)将隐式依赖于一些全局实用程序。

如果您的组件或页面中有太多的导入，可能是通过将其提取到自己的组件来封装这些额外功能的标志。

有争议的是，您可以尝试在 Custom "App" 中添加全局实用程序

例如，您可以通过自定义 App 的 props 将 React 组件传递给所有 Next.js 页面。 .

_app.js

import Icon from '../components/Icon';

export default function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} icon={Icon} />
}

因为所有页面都是从 App 实例化的，每个页面都会在 props 中包含此组件.

index.js

const Home = props => (
    <div>
        <props.icon><props.icon/>
    </div>
);

如果您有许多组件，您可以将它们分组到列表中并分配给单个 Prop ，因此您可以像这样使用它:

index.js

const Home = props => (
    <div>
        <props.components.icon/>
        <props.components.anotherIcon/>
    </div>
);

附带说明，建议使用 getStaticProps和 getServerSideProps对于页面而不是 getInitialProps从 Next.js 9.3 开始。

推荐阅读:

Next.js Data fetching (getInitialProps)

React.js Code-Splitting