Next.js中CSS加载异常导致页面无法正常显示问题排查

1. CSS文件引入逻辑错误 #

Next.js的public目录是静态资源存放目录，不能通过import语法直接引入其中的CSS文件。你需要将这些第三方CSS文件迁移到styles目录下，再通过相对路径引入，否则会导致资源加载失败，阻断页面渲染。

当前错误的引入写法：

import '../public/vendor/bootstrap/css/bootstrap.min.css'
import '../public/css/fontawesome.css'
import '../public/css/templatemo-stand-blog.css'
import '../public/css/owl.css'

2. 动态脚本的路径错误 #

useEffect中创建的脚本，src使用了相对路径../vendor/...，但public目录下的静态资源必须以根路径/开头引用，否则路径会基于当前页面路由解析，导致脚本找不到。

错误写法：

script.src = "../vendor/jquery/jquery.min.js";
script2.src = "../vendor/bootstrap/js/bootstrap.bundle.min.js";

修正为：

script.src = "/vendor/jquery/jquery.min.js";
script2.src = "/vendor/bootstrap/js/bootstrap.bundle.min.js";

3. 组件卸载清理逻辑存在报错风险 #

直接调用document.body.removeChild(script)会在脚本已被移除或不存在时抛出错误，导致页面渲染异常。需要先判断元素存在再执行移除：

return () => {
  if (document.body.contains(script)) {
    document.body.removeChild(script);
  }
  if (document.body.contains(script2)) {
    document.body.removeChild(script2);
  }
};

4. Bootstrap与jQuery的加载顺序问题 #

Bootstrap的JS依赖jQuery，设置async: true可能导致Bootstrap在jQuery加载完成前执行，引发依赖错误。可以通过onload事件确保加载顺序：

const script = document.createElement('script');
script.src = "/vendor/jquery/jquery.min.js";
// 等jQuery加载完成后再加载Bootstrap
script.onload = () => {
  const script2 = document.createElement('script');
  script2.src = "/vendor/bootstrap/js/bootstrap.bundle.min.js";
  document.body.appendChild(script2);
};
document.body.appendChild(script);

修正后的完整_app.js示例 #

import Script from 'next/script'
import '../styles/globals.css'
// 第三方CSS迁移到styles目录后引入
import '../styles/vendor/bootstrap/css/bootstrap.min.css'
import '../styles/css/fontawesome.css'
import '../styles/css/templatemo-stand-blog.css'
import '../styles/css/owl.css'
import { useEffect } from "react";

function MyApp({ Component, pageProps }) {

  useEffect(() => {
    const script = document.createElement('script');
    script.src = "/vendor/jquery/jquery.min.js";
    script.onload = () => {
      const script2 = document.createElement('script');
      script2.src = "/vendor/bootstrap/js/bootstrap.bundle.min.js";
      document.body.appendChild(script2);
    };
    document.body.appendChild(script);

    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
      const bootstrapScript = document.querySelector('script[src="/vendor/bootstrap/js/bootstrap.bundle.min.js"]');
      if (bootstrapScript && document.body.contains(bootstrapScript)) {
        document.body.removeChild(bootstrapScript);
      }
    }
  }, []);

  return (
    <>
      <Script src="https://www.google-analytics.com/analytics.js" />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

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