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

问题描述 投票:0回答:1

我是Nextjs的新手,我想在Nextjs的所有页面中添加组件和实用程序的列表。如何在我的组件中使它们全部可用,而又不一一导入。

[getInitialProps函数中的axios之类的页面,或者在我的情况下clientApollo中,可能还需要一些实用程序。

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

预先感谢

reactjs next.js
1个回答
0
投票

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

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

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

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

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

例如,您可以通过自定义App的道具将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>
);

如果您有很多组件,则可以将它们分组到列表中并分配给一个道具,因此可以像这样使用它:

index.js

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

附带说明,自Next.js 9.3起,建议对页面使用getStaticPropsgetServerSideProps而不是getInitialProps

建议阅读:

Next.js Data fetching (getInitialProps)

React.js Code-Splitting

© www.soinside.com 2019 - 2024. All rights reserved.