Next.js 15中如何引入并执行外部JavaScript脚本？

你的问题主要有两个原因：一是Script组件没有被放入组件返回的JSX中，导致脚本根本没加载；二是脚本执行时可能DOM元素还未生成，无法找到目标节点。以下是解决方法：

1. 修正Script组件的位置 #

必须将Script组件放在Home组件的return JSX结构内，否则Next.js不会渲染这个脚本标签：

import Image from "next/image";
import Script from "next/script";

export default function Home() {
  return (
    <>
      <div>
        <p id="myText"></p>
      </div>
      {/* 将Script组件移入返回的JSX中 */}
      <Script src="/components/script.js" strategy="afterInteractive" />
    </>
  );
}

2. 确保脚本在DOM就绪后执行 #

修改public/components/script.js，添加DOM加载完成的监听，避免因元素未生成导致的错误：

document.addEventListener('DOMContentLoaded', () => {
  const targetElement = document.getElementById('myText');
  if (targetElement) {
    targetElement.textContent = "Hello, this is a text";
  }
});

更可靠的方式：利用Script组件的onLoad回调 #

可以直接在组件内处理脚本加载后的逻辑，不需要修改外部脚本：

import Image from "next/image";
import Script from "next/script";

export default function Home() {
  const handleScriptLoaded = () => {
    const targetElement = document.getElementById('myText');
    if (targetElement) {
      targetElement.textContent = "Hello, this is a text";
    }
  };

  return (
    <>
      <div>
        <p id="myText"></p>
      </div>
      <Script 
        src="/components/script.js" 
        onLoad={handleScriptLoaded}
        strategy="afterInteractive"
      />
    </>
  );
}

替代方案：直接使用React的useEffect #

如果脚本逻辑简单，完全可以不用外部JS文件，直接在组件内通过useEffect执行DOM操作，更符合React的开发习惯：

import { useEffect } from 'react';
import Image from "next/image";

export default function Home() {
  useEffect(() => {
    const targetElement = document.getElementById('myText');
    if (targetElement) {
      targetElement.textContent = "Hello, this is a text";
    }
  }, []); // 空依赖数组确保只在组件挂载后执行一次

  return (
    <>
      <div>
        <p id="myText"></p>
      </div>
    </>
  );
}

说明：strategy="afterInteractive"是Next.js推荐的脚本加载策略，会在页面交互就绪后加载脚本，平衡性能和执行时机。

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