什么是 Web Worker 以及如何在 NextJS 中使用它

"use client";

import { changeevent, mouseevent, usecallback, useeffect, useref, usestate } from "react";

export default function home() {
    const [userinput, setuserinput] = usestate<string>("");
    const workerref = useref<worker>();
    const [dogpics, setdogpics] = usestate<string>();

    useeffect(() =&gt; {
        workerref.current = new worker(new url("./worker.ts", import.meta.url));
        workerref.current.onmessage = (event: messageevent<string>) =&gt; setdogpics(event.data);
        return () =&gt; {
            workerref.current?.terminate();
        };
    }, []);

    const handleuserinputchange = usecallback(
        (e: changeevent<htmlinputelement>) =&gt; {
            setuserinput(e.target.value);
        },
        [setuserinput]
    );

    const handlefetch = usecallback(
        (e: mouseevent<htmlbuttonelement>) =&gt; {
            userinput &amp;&amp; workerref.current?.postmessage(userinput);
        },
        [userinput]
    );

    return (
        <div>
            <input placeholder="number of dogs" value="{userinput}" onchange="{handleuserinputchange}" classname="mr-4 text-black">
            <button classname="bg-green-500 text-black rounded" onclick="{handlefetch}">
                fetch
            </button>
            {dogpics &amp;&amp; dogpics.map((pic) =&gt; @@##@@)}
        </div>
    );
}
</htmlbuttonelement></htmlinputelement></string></string></worker></string>

self.onmessage = async (e: MessageEvent<string>) =&gt; {
    const url = `https://dog.ceo/api/breeds/image/random/${e.data}`;
    const response = await fetch(url).then((res) =&gt; res.json());
    self.postMessage(response.message);
};
</string>