Question

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

getInitialProps功能的某些页面（例如axios或client的页面Apollo）中可能需要一些实用程序。

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

预先感谢

Answer 1

我建议在每个页面上为每个组件和实用程序进行动态导入，而不是使组件成为全局组件。这样，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起，建议对页面使用getStaticProps和getServerSideProps而不是getInitialProps。

建议阅读：

Next.js Data fetching (getInitialProps)

React.js Code-Splitting

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

1 个答案: