[ Nextjs 02 ] js추가하기

1.라이브러리 public 폴더에추가

/public/js/{javascrip 파일추가}

- 경로는 public 하위디렉토리면 상관없다

2.d.ts 파일추가

/src/app/{something}.d.ts


// particles.d.ts
declare module "particles.js" {
    export function load(tagId: string, pathConfigJson: string, callback: () => void): void;
}

interface Window {
    particlesJS: {
        load: (tagId: string, pathConfigJson: string, callback: () => void) => void;
    };
}

- 프로젝트 root 경로에 파일추가

3. 실제 프로젝트에적용 

// components/particles_third.tsx
'use client';

import { useEffect } from 'react';

const ParticlesThird = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = '/js/particles.min.js';
        script.async = true;
        script.onload = () => {
            console.log('particles.js script loaded successfully');
            if (window.particlesJS) {
                window.particlesJS.load('particles-js', '/js/particlesjs-config.json', function () {
                    console.log('callback - particles.js config loaded');
                });
            } else {
                console.log('particlesJS is not available on the window object');
            }
        };
        script.onerror = () => {
            console.error('particles.js script failed to load');
        };
        document.head.appendChild(script);
    }, []);

    return (
        <>
            <div id="particles-js" style={{ position: 'absolute', width: '100%', height: '100%' }}></div>
            <div style={{ position: 'relative' }}>
                <h1>Hello, Particles.js!</h1>
            </div>
        </>
    );
};

export default ParticlesThird;