有没有办法将CDN物化与Next.js一起使用?
我正在构建一个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模板和更多信息。
相关文章