什么是 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(() => {
        workerref.current = new worker(new url("./worker.ts", import.meta.url));
        workerref.current.onmessage = (event: messageevent<string[]>) => setdogpics(event.data);
        return () => {
            workerref.current?.terminate();
        };
    }, []);

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

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

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

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