How to set a particles background on nextjs?

Question

I would like to set a particles background only on one page of my web application. I used the following code:

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;

The page has 100vh (styles.page), I have tried to set a className to the Particles component like this:

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

But it doesn't show the particles, the background is red and the particles are set to white. I have also tried to set the Particles component this way:

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

But this still doesn't work. I have also tried to set height and width to 100%. Please, is there a way to make this work?

Answer 1

I might be too late but I hope this will help somebody.

I was facing the same problem on Next.js and was able to get it working by following the docs here

Basically, you have to add the main tsparticles package and use an exported function from it called loadFull to load the particles.

For example, this is what it'll look like.

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;

Disclaimer: The code is referenced from the docs.

Edited: It seems that the documentations have moved to here