有没有办法将CDN物化与Next.js一起使用?

2022-04-17 00:00:00 reactjs css next.js materialize

我正在构建一个Next.js应用程序,并希望使用物化CDN。在Reaction中,我只需在public/index.html文件中添加CDN链接,就可以了。NeXT似乎没有,我被困在如何做到这一点上。

我已尝试

npm install materialize-css@next --save

我将其导入到pages/_app.tsx中,如下所示:

import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css'

当它只是第一个导入时,它工作得很好,但当我导入第二个导入以添加JS时,它抛出以下错误:

Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

另外,对于这种导入,我不能对CSS进行任何定制,这就是为什么我想使用CDN。我已经做了好几天了,但一无所获。


解决方案

不是在_app.tsx中执行,而是在_document.js文件中执行。在这个文件中,您可以增加NextJS项目中的html和body标记。请务必注意,它必须是.js文件,而不是.tsx文件。

默认情况下,您的项目中不存在此文件,它是由nextJS自动生成的,但您可以在Pages文件夹中创建它,以覆盖默认文件并在那里导入CDN。

您在the official documentation中拥有_Document.js模板和更多信息。

相关文章