Antes que nada, tenga en cuenta que soy extremadamente nuevo en NextJS, CodePen y desarrollo web en general.
Encontré esta genial animación de movimiento del mouse en CodePen y quería implementarla en el sitio web que comencé a construir en NextJS. Estoy bastante seguro de que importé los archivos correctamente y el CSS funciona, pero el script no.
Este es mi código index.js completo.
import Head from 'next/head' import Script from 'next/script' export default function Home() { return ( <html lang="en" > <Head> <meta charset="UTF-8"/> <title>CodePen - Animated Background</title> <link href='https://fonts.googleapis.com/css?family=Raleway:200,400,800' rel='stylesheet' type='text/css'/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/> <link rel='stylesheet' href='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/css/demo.css'/><link rel="stylesheet" href="../styles/dynamic.css"/> </Head> <body> <div id="large-header" className="large-header"> <canvas id="demo-canvas"></canvas> <h1 className="main-title">Vansh <span className="thin">Sharma</span></h1> </div> <Script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/EasePack.min.js'/> <Script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/rAF.js'/> <Script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/TweenLite.min.js'/> <Script src="../scripts/dynamic_script.js" strategy='beforeInteractive' defer={false} type='text/javascript'/> </body> </html> ) }