如何在Next.js项目中使用tsParticles？

核心依赖安装 #

先安装官方维护的React绑定包及核心库：

npm install react-tsparticles tsparticles
# 或用yarn
yarn add react-tsparticles tsparticles

App Router 组件示例（客户端组件） #

Next.js App Router下组件默认是服务器组件，需添加'use client'指令启用客户端渲染：

'use client';

import { useCallback } from 'react';
import Particles from 'react-tsparticles';
import { loadFull } from 'tsparticles';
import type { Container, Engine } from 'tsparticles';

export default function ParticlesBackground() {
  // 初始化tsParticles引擎
  const particlesInit = useCallback(async (engine: Engine) => {
    // 加载完整功能集，若需轻量化可替换为loadSlim
    await loadFull(engine);
  }, []);

  // 粒子加载完成回调
  const particlesLoaded = useCallback(async (container: Container) => {
    console.log('tsParticles 加载完成');
  }, []);

  return (
    <Particles
      id="tsparticles-bg"
      init={particlesInit}
      loaded={particlesLoaded}
      // 自定义粒子配置，可根据需求修改
      options={{
        particles: {
          color: { value: '#6366f1' },
          links: {
            color: '#6366f1',
            distance: 120,
            enable: true,
            opacity: 0.4,
            width: 1
          },
          move: {
            enable: true,
            speed: 1,
            outModes: { default: 'bounce' }
          },
          number: { value: 60 },
          opacity: { value: 0.6 },
          shape: { type: 'circle' },
          size: { value: { min: 1, max: 3 } }
        },
        detectRetina: true
      }}
    />
  );
}

Pages Router 兼容写法 #

如果使用Pages Router，无需添加'use client'，直接编写组件即可，代码逻辑与上述示例一致。

优化技巧 #

• 轻量化打包：用loadSlim替代loadFull，仅加载核心粒子功能，减少包体积
• 动态导入：通过Next.js的dynamic函数异步加载组件，避免首屏加载压力：

  import dynamic from 'next/dynamic';
  const Particles = dynamic(() => import('react-tsparticles').then(mod => mod.default), { ssr: false });
  

• 抽离配置：将粒子options抽为单独常量或配置文件，便于统一维护和修改

内容的提问来源于stack exchange，提问作者prog-pog