Next.js integration wrapper for @tsparticles/react.
- Provides Next.js-first exports (
NextParticlesProvider,NextParticles). - Handles client-only rendering for particles via dynamic import.
- Keeps the one-time async init flow centered on the provider.
pnpm add @tsparticles/nextjs @tsparticles/react @tsparticles/engineor
npm install @tsparticles/nextjs @tsparticles/react @tsparticles/engineor
yarn add @tsparticles/nextjs @tsparticles/react @tsparticles/engineImportant
Place NextParticlesProvider at your app root (layout.tsx or _app.tsx), not inside a component that may unmount.
The provider must be rendered only once for the entire app lifecycle.
"use client";
import { NextParticles, NextParticlesProvider } from "@tsparticles/nextjs";
import type { Engine } from "@tsparticles/engine";
const init = async (engine: Engine): Promise<void> => {
const [{ loadSlim }, { loadThemesPlugin }] = await Promise.all([
import("@tsparticles/slim"),
import("@tsparticles/plugin-themes"),
]);
await Promise.all([loadSlim(engine), loadThemesPlugin(engine)]);
};
export default function Page() {
return (
<NextParticlesProvider init={init}>
<NextParticles id="tsparticles" options={{ fullScreen: { zIndex: -1 } }} />
</NextParticlesProvider>
);
}import type { AppProps } from "next/app";
import { NextParticlesProvider } from "@tsparticles/nextjs";
import type { Engine } from "@tsparticles/engine";
const init = async (engine: Engine): Promise<void> => {
const [{ loadSlim }, { loadThemesPlugin }] = await Promise.all([
import("@tsparticles/slim"),
import("@tsparticles/plugin-themes"),
]);
await Promise.all([loadSlim(engine), loadThemesPlugin(engine)]);
};
export default function App({ Component, pageProps }: AppProps) {
return (
<NextParticlesProvider init={init}>
<Component {...pageProps} />
</NextParticlesProvider>
);
}