我是Nextjs的新手,我想在Nextjs的所有页面中添加组件和实用程序的列表。如何在我的组件中使它们全部可用,而又不一一导入。
[getInitialProps
函数中的axios
之类的页面,或者在我的情况下client
的Apollo
中,可能还需要一些实用程序。
我不希望有人为Nextjs.config
写一个完整的配置文件,只是帮助我更深入地了解下一个配置。
预先感谢
我建议在每个页面上为每个组件和实用程序进行动态导入,而不是使组件成为全局组件。这样,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
。
建议阅读: