求助：react-particles.js在Next.js项目生产环境无法运行，开发环境正常

I've run into this exact issue before! When react-particles.js works flawlessly in dev mode but dies silently in production with zero console errors, it's almost always related to SSR mismatches or unintended tree-shaking during the production build. Here are the most reliable fixes to try:

1. Dynamically Import the Component with SSR Disabled #

react-particles.js relies heavily on browser-specific APIs (like the DOM) that aren't available during server-side rendering. Next.js's dynamic import lets us render the component only on the client side:

import type { NextPage } from 'next'
import dynamic from 'next/dynamic'
import Head from 'next/head'

// Disable SSR for the Particles component to avoid server-side DOM issues
const Particles = dynamic(() => import('react-particles'), {
  ssr: false,
  loading: () => <div className="text-center">Loading particles...</div> // Optional loading state
})

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Particle Demo</title>
      </Head>
      <Particles />
    </div>
  )
}

export default Home

This ensures the component initializes only after the page has loaded in the browser, matching the dev environment behavior.

2. Prevent Unintended Tree-Shaking #

Production build tools sometimes strip out "unused" code—including particle configuration objects if they aren't explicitly tied to the component. Make sure your particle config is directly referenced by the Particles component:

// Define your config and pass it explicitly to the component
const particleConfig = {
  particles: {
    number: { value: 60 },
    size: { value: 3 }
    // Add your custom config here
  }
}

// In your component:
<Particles params={particleConfig} />

If you're using a minimal default config, double-check that the library's default values aren't being stripped. You can also verify your next.config.js doesn't have overly aggressive tree-shaking enabled.

3. Verify Dependency Compatibility #

Version mismatches between Next.js and react-particles.js can cause silent failures in production. Try updating to the latest stable versions, or reinstalling dependencies to resolve any corrupt installs:

rm -rf node_modules package-lock.json
npm install

Also, ensure you're using the correct peer dependencies—react-particles.js often requires tsparticles as a direct dependency, not just a peer one.

4. Manually Initialize the Particle Engine #

If the above steps don't work, explicitly load the tsparticles engine after the component mounts using useEffect:

import type { NextPage } from 'next'
import Head from 'next/head'
import Particles from 'react-particles'
import { loadFull } from 'tsparticles'
import { useEffect, useRef } from 'react'

const Home: NextPage = () => {
  const particlesRef = useRef<Particles>(null)

  useEffect(() => {
    const initParticles = async () => {
      if (particlesRef.current) {
        // Load the full tsparticles engine to ensure all features work in production
        await loadFull(particlesRef.current.engine)
      }
    }
    initParticles()
  }, [])

  return (
    <div>
      <Head>
        <title>Particle Demo</title>
      </Head>
      <Particles ref={particlesRef} />
    </div>
  )
}

export default Home

This forces the engine to initialize explicitly on the client side, bypassing any production build optimizations that might block it.

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