GET /api/socket/io?EIO=4&transport=polling&t=pkuausu6 404 in 32ms

[Ot7struggle]

this is my file app/api/socket/io.ts:
`import { Server as NetServer } from "http";
import { NextApiRequest } from "next";
import { Server as ServerIO } from "socket.io";

import { NextApiResponseServerIo } from "../../../../types";

export const config = {
api: {
bodyParser: false,
},
};

const ioHandler = (req: NextApiRequest, res: NextApiResponseServerIo) => {
if (!res.socket.server.io) {
const path = "/api/socket/io";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const httpServer: NetServer = res.socket.server as any;
const io = new ServerIO(httpServer, {
path: path,
addTrailingSlash: false,
});
res.socket.server.io = io;
}

res.end();
};

export default ioHandler;
type.ts: import { Server as NetServer, Socket } from "net";
import { NextApiResponse } from "next";
import { Server as SocketIOServer } from "socket.io";

export type NextApiResponseServerIo = NextApiResponse & {
socket: Socket & {
server: NetServer & {
io: SocketIOServer;
};
};
};
`
component/socket-provider.io:

`"use client";

import {
createContext,
useContext,
useEffect,
useState
} from "react";

import { io as ClientIO } from "socket.io-client";

type SocketContextType = {
socket: ReturnType | null;
isConnected: boolean;
};

const SocketContext = createContext({
socket: null,
isConnected: false,
});

export const useSocket = () => {
return useContext(SocketContext);
};

export const SocketProvider =({
children
}: {
children: React.ReactNode
}) => {
const [socket, setSocket] = useState(null);
const [isConnected, setIsConnected] = useState(false);

useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const socketInstance = new (ClientIO as any) (process.env.NEXT_PUBLIC_SITE_URL!, {
        path: "/api/socket/io",
        addTrailingSlash: false,
    });

    socketInstance.on("connect", () => {
        setIsConnected(true);
    });

    socketInstance.on("disconnect", () => {
        setIsConnected(false);
    });

    setSocket(socketInstance);

    return () => {
        socketInstance.disconnect();
    }
}, []);

return (
    <SocketContext.Provider value={{socket, isConnected}}>
        {children}
    </SocketContext.Provider>
)

}`

i troed to run and met with this error any idea why am i facing this