如何在Next.js上设置粒子背景？

Question

我想在Web应用程序的一个页面上仅设置粒子背景。 我使用了以下代码：

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";

const particlesOptions = {
    background: {
      color: {
        value: "transparent",
      },
    },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: {
          enable: false,
          mode: "push",
        },
        onHover: {
          enable: false,
          mode: "repulse",
        },
        resize: true,
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 40,
        },
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    fullScreen: {
      enable: false,
      zIndex: 0
    },
    particles: {
      color: {
        value: "#ffffff",
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: false,
        opacity: 0.5,
        width: 1,
      },
      collisions: {
        enable: false,
      },
      move: {
        direction: "top",
        enable: true,
        outMode: "out",
        random: false,
        speed: 3,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          area: 800,
        },
        value: 30,
      },
      opacity: {
        value: 0.9,
      },
      shape: {
        type: "edge",
      },
      size: {
        random: true,
        value: 3,
      },
    },
  detectRetina: true,
}

const Page = () => {
    return (
        <div className={styles.page}>
          <Particles className={styles.particles} options={particlesOptions} />
        </div>
    );
};

export default Page;

这个页面有100vh（styles.page），我试着像这样为Particles组件设置一个className：

.particles {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
 }

但它不显示粒子，背景是红色的而粒子设置为白色。我也尝试了这种方式来设置Particles组件：

const Page = () => {
    return (
        <>
            <Particles className={styles.particles} options={particlesOptions} />
            <div className={styles.page}>
            </div>
        </>
    );
};

但这仍然不起作用。我也尝试将高度和宽度设置为100％。请问是否有办法使其正常工作？

- josanbaq

Answer 1

我可能来得太晚了，但希望这能对某人有所帮助。

我在Next.js上遇到了同样的问题，并通过按照文档这里的说明解决了它。

基本上，你需要添加主要的tsparticles包，并使用从中导出的一个名为loadFull的函数来加载粒子。

例如，下面是它的样子。

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

const options = {
    //options
};

const Page = () => {
    const particlesInit = async (main: Engine) => {
    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
};

    return (
        <div className={styles.page}>
            <Particles className={styles.particles} init={particlesInit} options={particlesOptions} />
        </div>
    );

};

export default Page;

免责声明：该代码参考自文档。

编辑：看起来文档已经移到这里

- Thet Aung