The problem is that Sketch component is wanting to access window property, but window is undefined since we serve server side rendered About page.

How to get around this?

Best solution would be to create a separated component, we can call it DrawSketch

DrawSketch component is almost identical to your About page with exception that it is a component.

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} />;
}

Next thing we want is to make sure that we will client side server our DrawSketch component, so it can has access to window property.

In next.js you can use dynamic imports

Next.js supports ES2020 dynamic import() for JavaScript. With it you can import JavaScript modules dynamically and work with them. They also work with SSR.

Next step would be importing DrawSketch component we created inside your About view and declare it as dynamic component which is 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 />
    </>
  );
}

I have edited codesandbox, so you can see working live example.