next.js×socket.jsでGET error404 の解決方法を教えてください

前提

Next.jsでserver側とclient側でsocket.jsを読み込み通信を取りたいと思っていたのですが、
errorが出てしまいできませんでした
1日考えたのですがわからないのでわかる方いらっしゃれば教えていただきたいです

実現したいこと

next.jsでsocket.ioを使用する

発生している問題・エラーメッセージ

GET http://localhost:3000/socket.io?EIO=4&transport=polling&t=OAL-PqE 404 (Not Found) create @ polling.js:324 Request @ polling.js:268 request @ polling.js:220 doPoll @ polling.js:245 poll @ polling.js:111 doOpen @ polling.js:71 open @ transport.js:56 open @ socket.js:171 Socket @ socket.js:112 open @ manager.js:118 eval @ manager.js:330

該当のソースコード

server.js

import { createServer } from "http"; import { Server as socketioServer } from "socket.io"; import express from "express"; const port = process.env.PORT || 3000; const app = next({ dev }); const handle = app.getRequestHandler(); app.prepare().then(async () => { const expressApp = express(); const server = createServer(expressApp); const io = new socketioServer(); io.attach(server); io.sockets.on("connection", (socket) => { //socketの処理 }) expressApp.all("*", (req, res) => handle(req, res)); server.listen(port); })

client.js

import type { NextPage } from "next"; import io from "socket.io-client"; import { useEffect, useState } from "react"; const MAIN: NextPage = () => { const [socket, _] = useState(() => io()); socket.on("hoge",()=>{ console.log("ok"); }) return(<div>htmlが入ります</div>) } export default MAIN;

試したこと

いろいろなサイト調べてProcfileやpackage.jsを変更しました
しかし無理でした

補足情報（FW/ツールのバージョンなど）

OS:linux mint
node:v16.16.0
npm:v8.11.0
他に知りたいことや間違いがあれば教えてください