Next.js中script标签放置位置及Materialize引入语法咨询

嗨，很高兴看到你刚接触Next.js就爱上它了！Materialize确实是个简洁好用的CSS框架，你的思路其实已经走对了——在Next.js里，_app.js就是用来配置全局资源、统一布局的核心文件，把Materialize的样式和脚本放在Head组件里是完全正确的做法。

不过有个小细节可以优化一下，让你的集成更稳妥：

• 脚本加载后的初始化：Materialize的JS脚本加载完成后，需要调用它的初始化方法才能让下拉菜单、轮播、模态框这类交互组件正常工作。直接在script标签里加上onLoad事件，就能确保脚本加载完成后再执行初始化逻辑，避免出现找不到M对象的报错：

import '../styles/globals.css';
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* 引入Materialize全局样式 */}
        <link 
          rel="stylesheet" 
          href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" 
        />
        {/* 引入Materialize脚本并添加初始化逻辑 */}
        <script 
          src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
          onLoad={() => {
            // 自动初始化页面上所有Materialize组件
            M.AutoInit();
          }}
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

如果你更倾向于使用本地资源（比如离线开发场景），也可以把Materialize的CSS和JS文件下载到项目的public目录下，然后修改引用路径：

<link rel="stylesheet" href="/materialize.min.css" />
<script src="/materialize.min.js" onLoad={() => M.AutoInit()} />

补充说明 #

• Next.js的Head组件会自动处理重复标签（比如多个页面都引用相同资源时，它只会渲染一次），不用担心资源重复加载的问题。
• 如果某个页面需要单独初始化特定组件，也可以在页面的useEffect钩子中调用对应方法，比如：

import { useEffect } from 'react';

function MyPage() {
  useEffect(() => {
    // 单独初始化下拉菜单组件
    const elems = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(elems);
  }, []);

  return <a className="dropdown-trigger" href="#!" data-target="dropdown1">下拉菜单</a>;
}

总的来说，你最初的写法语法上完全正确，加上onLoad的初始化逻辑只是让集成更完善，避免出现交互组件不生效的问题。

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