image handling concept

Next.js doesn't have an image handling concept, you can just load images with the native Image API like

const image = new Image()
image.src = "/my-image.png"

you must do this in a useEffect in a client component

Since canvas can't be rendered on server-side

Thank you. I had to make sure that a lot of entangled logic had to be dealt with in the useeffect before i can use the results in the Frontend. Its realy hard to debug. I belive another approach would be to change the loader.... cause
What i wished for, was a dataobject (the image) which can be modified and when i draw it, it has to be in useEffect - But the constructor has to happen in useEffect too, otherwise it is not available.

Is this right? I am not sure if i understand the concept behind all of this.

I belive another approach would be to change the loader

I don't understand what do you mean by "change to loader", Image API is only available on client-side, referencing it outside of useEffect would cause errors.

Its realy hard to debug

Actually, you can just use console.log and see the logs in devtools


When you draw an image on canvas, you must have the image loaded and canvas mounted on DOM. Canvas is a browser API, you can't access it server-side

useEffect ensures that your code is only excuted client-side when React.js is loaded

I tried this but TS retuns error messages about Expected 1 arguments, but got 0.ts(2554)
index.d.ts(575, 10): An argument for 'props' was not provided.
what am i doing wrong?

The parameters are image size, like new Image(1200,700). I didn’t include that in my example