如何在Next.js项目中正确使用Materialize CDN资源？

方案1：使用CDN接入（满足自定义CSS需求） #

Next.js的全局HTML入口为自定义_document.tsx文件，作用等价于传统React项目的public/index.html。操作步骤如下：

1. 在项目pages目录下新建_document.tsx文件，写入以下代码：

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="zh-CN">
      <Head>
        {/* 替换为你要使用的Materialize CSS CDN地址 */}
        <link rel="stylesheet" href="对应的Materialize CSS CDN链接" />
      </Head>
      <body>
        <Main />
        <NextScript />
        {/* 替换为你要使用的Materialize JS CDN地址，放在body末尾避免服务端执行 */}
        <script src="对应的Materialize JS CDN链接"></script>
      </body>
    </Html>
  )
}

2. 自定义样式直接写在项目的全局CSS文件中，在pages/_app.tsx中引入即可，只要引入顺序在Materialize CSS之后，就能覆盖默认样式。
   该方案效果和传统React项目往index.html插入CDN链接完全一致，不会触发服务端渲染阶段的window报错。

方案2：本地依赖引入解决window报错问题 #

直接在_app.tsx引入materialize JS报错的原因是：Next.js存在服务端渲染阶段，服务端运行环境没有window全局对象，而Materialize JS初始化时会直接访问window，因此触发报错。可通过以下两种方式解决：

• 方式1：在客户端生命周期中引入JS
  在pages/_app.tsx中通过useEffect引入，useEffect仅在客户端执行，此时window对象存在：

import { useEffect } from 'react'
import 'materialize-css/dist/css/materialize.min.css'
import '../styles/global.css' // 你的自定义样式放在这里即可覆盖默认样式

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import('materialize-css')
  }, [])

  return <Component {...pageProps} />
}

• 方式2：使用next/dynamic关闭SSR加载
  仅在需要用到Materialize交互能力的组件中动态引入，关闭服务端渲染：

import dynamic from 'next/dynamic'

const M = dynamic(() => import('materialize-css'), { ssr: false })

内容的提问来源于stack exchange，提问作者Sky Lurk