Next.js SSR环境下能否使用tsparticles？遇类组件渲染报错求助

问题原因 #

react-tsparticles依赖浏览器环境API（如window），且内部包含React类组件，而Next.js App Router默认采用SSR（服务端渲染），服务端渲染阶段无浏览器环境，也不支持渲染类组件，因此抛出Class extends value undefined is not a constructor or null错误。

解决方案 #

1. 标记粒子组件为客户端组件 #

在ParticlesBackground.jsx顶部添加'use client'指令，强制该组件仅在客户端渲染，避开服务端环境限制。

2. 修正Next.js配置文件 #

合并next.config.js的重复导出，并确保transpilePackages同时包含tsparticles和react-tsparticles，让Next.js正确转译这两个第三方依赖。

3. （可选）适配新版API #

若使用react-tsparticles新版本，需将params属性替换为options（新版本已废弃params参数）。

修改后代码示例 #

ParticlesBackground.jsx #

'use client';
import Particles from "react-tsparticles";
import particlesConfig from "./config/particles-config";

const ParticlesBackground = () => {
    // 新版本请替换为 <Particles options={particlesConfig} />
    return <Particles params={particlesConfig} />;
}

export default ParticlesBackground

next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
    transpilePackages: ['tsparticles', 'react-tsparticles'],
    // 其他Next.js配置项
};

module.exports = nextConfig;

验证 #

重启Next.js开发服务器后，粒子效果将正常在客户端渲染，服务端错误会消失。

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