title: How To Implement React hook Socketio in Next.js
body: <p>I have tried to find a way from Google but the results can remain the same</p>
  
  <p> <code>http://localhost:8000/socket.io/?EIO=3&amp;transport=polling&amp;t=MnHYrvR</code></p>
  
  <p>i try this wan <a href="https://medium.com/@markcolling/integrating-socket-io-with-next-js-33c4c435065e" rel="noreferrer">medium</a> try other ways, the results remain the same</p>
  
  <p>and for the front end I have tried, socket io inside the hook component and outside the scope, the results remain the same</p>
  
  <p><code>http://localhost:8000/socket.io/?EIO=3&amp;transport=polling&amp;t=MnHYrvR</code></p>
  
  <p>this is my code from server:</p>
  
  <pre><code>app.prepare().then(() =&gt; {
      const server    = express();
      const setServer = require('http').Server(server);
      const io        = require('socket.io')(setServer)
  
      server.use(bodyParser.json());
      server.use(cookieParser());
  
      io.on('connection', socket =&gt; {
          console.log('socket', socket);
  
          socket.emit('now', {
              message: 'zeit'
          })
      })
  
  
      server.use(routers)
  
      server.get('*', (req, res) =&gt; {
          return handle(req, res);
      });
  
      server.use( (err, req, res, next) =&gt; {
          console.log(err)
          if(err.name === 'Error'){
              res.status(401).send({
                  title: 'error',
                  detail: 'Unauthorized Access!'
              })
          }
      })
  
      server.listen(port, err =&gt; {
          if (err) throw err;
          console.log(`&gt; Ready on http://heroku:${port}`)
      })
  })
  .catch(ex =&gt; {
      console.error(ex.stack);
      process.exit(1);
  });
  </code></pre>
  
  <p>from front end:</p>
  
  <pre><code>//at the top of function
  const io = require('socket.io-client');
  const socket = io.connect('http://localhost:8000');
  console.log('socket', socket);
  
  //in use effect
  useEffect(() =&gt;{
          socket.on('now', message =&gt; {
              console.log('message', meesage);
          })
      })
  </code></pre>
  
  <p>Please help</p>