p5 + nextjs + typescript configuration (simple exmaple)

p5-nextjs.tsx

import React, { Component } from "react"
type P5 = import("p5");
import dynamic from "next/dynamic"

const Sketch = dynamic(import("react-p5"), { ssr: false });
const imageurl = 'https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg'
interface ComponentProps {
    //Your component props
}

let img: any
export default class extends Component {
    renderRef: any
    constructor(props: ComponentProps) {
        super(props)
        this.renderRef = React.createRef()
        this.state = {
            x: 100,
            y: 100
        }
    }

    componentDidMount() {

    }

    // image: any
    preload(p5: P5) {
        p5.loadImage(imageurl, s => {
            img = s;
            p5.redraw()
        });
    }

    a = <p>helloooo</p>

    setup(p5: P5, CanvasParentRef: Element) {

        p5.createCanvas(1000, 1000)

        // p5.createElement
        const editableText = (p5: P5, args: {
            x: number
            y: number
            text: string
        }) => {
            const w = 80
            const h = 30
            p5.rect(args.x, args.y, 80, 30)
            p5.text(args.text, args.x + w / 2, args.y + h / 2)
        }
        editableText(p5, {
            text: "hi",
            x: 0, y: 50
        })


        editableText(p5, {
            text: "hi-lo",
            x: 400, y: 50
        })
        // p5.loadImage(imageurl, img => {
        //     img = img;
        //     p5.redraw(); // <- only if you're running with noLoop()
        // });
        //     this.image = p5.loadImage('https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg');

        // const image = p5.image(this.image, 100, 100)

    }

    draw(p5: P5) {
        if (img) {
            p5.image(img, 100, 100);
        }
    }

    doubleClicked(p5: P5) {
        const cursorX = p5.mouseX
        const cursorY = p5.mouseY

        console.log('clicked', event)
    }

    render() {
        return (
            <Sketch doubleClicked={this.doubleClicked} preload={this.preload} setup={this.setup} draw={this.draw}></Sketch>
        );
    }
}

P5 does not support click event for single node, i'm switching to KonvaJS