0
129
Visualizações404 en la actualización de la página en NextJS con p5.js
Estoy usando la biblioteca react-p5 para generar la animación de onda PerlinNoise en mi página about de. Cuando uso el p5 en cualquier página, devuelve una página 404, pero si hago clic en volver a la página de inicio y abro about.js usando el enlace, funcionará. Después de actualizar, no funcionará.
Todo funciona si elimino el componente p5 del archivo. Creo que el problema está en la p5 import de p5 o p5.
acerca de.js
import React from 'react' // Importing Sketch import Sketch from 'react-p5' export default function about() { // Setup for creating canvas const setup = (p5, canvasParentRef) => { p5.createCanvas(p5.windowWidth, 100).parent(canvasParentRef) } let inc = 0.005; let start = 0; // Function to draw the wave const draw = p5 => { p5.background('rgba(255,255,255)') p5.stroke('rgb(0,0,0)'); p5.noFill(); p5.beginShape(); let xoff = start; for (let x = 0; x < p5.width; x++) { p5.stroke('#000'); let y = p5.noise(xoff) * p5.height; p5.vertex(x, y); xoff += inc; } p5.endShape(); start += inc; } return ( <> // Returning Sketch Component <Sketch setup={setup} draw={draw} /> </> ) }Estructura del proyecto :
1 Respostas
Responde à pergunta0
El problema es que el componente Sketch quiere acceder a la propiedad de la window , pero la ventana no está definida ya que servimos la página Acerca de del lado del servidor.
Cómo evitar esto?
La mejor solución sería crear un componente separado, podemos llamarlo DrawSketch
El componente DrawSketch es casi idéntico a su página Acerca de, con la excepción de que es un componente.
import React from "react"; import Sketch from "react-p5"; export default function DrawSketch() { const setup = (p5, canvasParentRef) => { p5.createCanvas(p5.windowWidth, 100).parent(canvasParentRef); }; let inc = 0.005; let start = 0; // Function to draw the wave const draw = (p5) => { p5.background("rgba(255,255,255)"); p5.stroke("rgb(0,0,0)"); p5.noFill(); p5.beginShape(); let xoff = start; for (let x = 0; x < p5.width; x++) { p5.stroke("#000"); let y = p5.noise(xoff) * p5.height; p5.vertex(x, y); xoff += inc; } p5.endShape(); start += inc; }; return <Sketch setup={setup} draw={draw} />; } Lo siguiente que queremos es asegurarnos de que usaremos el servidor del lado del cliente para nuestro componente DrawSketch, de modo que pueda tener acceso a la propiedad de la window .
En next.js puedes usar importaciones dinámicas
Next.js admite la importación dinámica ES2020() para JavaScript. Con él puedes importar módulos de JavaScript de forma dinámica y trabajar con ellos. También trabajan con SSR.
El siguiente paso sería importar el componente DrawSketch que creamos dentro de su vista Acerca de y declararlo como un componente dinámico que not server side rendered .
import React from "react"; import dynamic from "next/dynamic"; const ClientSideSketch = dynamic(() => import("../components/DrawSketch"), { ssr: false }); export default function AboutPage() { return ( <> <ClientSideSketch /> </> ); }He editado codesandbox , para que pueda ver el ejemplo de trabajo en vivo.