NextJS 14 App Directory引入外部预订脚本无显示问题求助

问题分析 #

WordPress这类传统CMS是纯客户端渲染环境，直接粘贴HTML标签就能正常加载第三方资源，但NextJS 14 App Directory默认使用服务器组件，无法直接访问浏览器DOM，且资源加载机制和传统页面不同，这是导致脚本无法显示的核心原因。

解决步骤 #

需要创建客户端组件来处理第三方资源的加载，具体实现如下：

1. 创建预订日历客户端组件（app/BookingCalendar.jsx）

'use client';

import Script from 'next/script';
import { useEffect } from 'react';

export default function BookingCalendar() {
  // 动态加载所需CSS文件
  useEffect(() => {
    // 加载基础bootstrap样式
    const baseStyleLink = document.createElement('link');
    baseStyleLink.href = 'http://perranbeachhouse.free.nf/core/framework/libs/pj/css/pj.bootstrap.min.css';
    baseStyleLink.rel = 'stylesheet';
    baseStyleLink.type = 'text/css';
    document.head.appendChild(baseStyleLink);

    // 加载脚本生成的动态样式
    const dynamicStyleLink = document.createElement('link');
    dynamicStyleLink.href = 'http://perranbeachhouse.free.nf/index.php?controller=pjFront&action=pjActionLoadCss&cid=1';
    dynamicStyleLink.rel = 'stylesheet';
    dynamicStyleLink.type = 'text/css';
    document.head.appendChild(dynamicStyleLink);

    // 组件卸载时清理资源
    return () => {
      document.head.removeChild(baseStyleLink);
      document.head.removeChild(dynamicStyleLink);
    };
  }, []);

  return (
    <>
      {/* 加载预订核心脚本，使用afterInteractive策略确保客户端环境加载 */}
      <Script
        src="http://perranbeachhouse.free.nf/index.php?controller=pjFront&action=pjActionLoad&cid=1&view=3"
        strategy="afterInteractive"
        onLoad={() => {
          // 可选：脚本加载完成后可执行初始化逻辑（若脚本需要手动触发）
          console.log('预订脚本加载完成');
        }}
      />
      {/* 脚本挂载的DOM容器，多数第三方预订脚本会自动渲染到该容器 */}
      <div id="pj-wrapper"></div>
    </>
  );
}

2. 在页面中引入该组件（app/page.js）

import BookingCalendar from './BookingCalendar';

export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <h1>海滩别墅预订</h1>
      <BookingCalendar />
    </main>
  );
}

关键注意事项 #

• 必须添加'use client'指令：App Directory默认组件为服务器组件，无法访问浏览器DOM，标记为客户端组件后才能使用useEffect、document等客户端API。
• 资源加载时机：使用next/script的afterInteractive策略，确保脚本在客户端交互环境就绪后加载，避免服务器渲染时的DOM缺失问题。
• DOM容器：第三方脚本通常需要指定挂载的DOM元素，提前创建id="pj-wrapper"容器可确保脚本能找到渲染目标。
• 排查报错：若仍无法显示，打开浏览器控制台检查：
  • Network标签：确认CSS和脚本是否成功加载
  • Console标签：查看是否存在CORS错误、依赖缺失（如jQuery）或脚本初始化报错

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