w00t socket io API 🤩

[slim torrent]

Hi @magic sand. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

[magic sand]

thx for that one! Will eventually get to it. Hope it works with route handlers...

[slim torrent]

Sorry @magic sand, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

[frozen vigil]

ok.

[frozen vigil]

@slim torrent anything new?

[slim torrent]

Let me check the knowledge base for you again. One moment! :books:

---

Yes, there are several new features and improvements in Next.js. Here's a summary of some of the new features:

1. Routing: A new file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more. Source (https://beta.nextjs.org/docs/routing/fundamentals)
2. Rendering: Client-side and Server-side Rendering with Client and Server Components. Further optimized with Static and Dynamic Rendering on the server with Next.js. Streaming on Edge and Node.js runtimes. Source (https://beta.nextjs.org/docs/rendering/fundamentals)
3. Data Fetching: Simplified data fetching with async/await support in React Components and the fetch() API that aligns with React and the Web Platform. Source (https://beta.nextjs.org/docs/data-fetching/fundamentals)
4. Caching: New Next.js HTTP Cache and client-side cache optimized for Server Components and client-side navigation. Source 1 (https://beta.nextjs.org/docs/data-fetching/fundamentals#caching-data), Source 2 (https://beta.nextjs.org/docs/routing/linking-and-navigating#client-side-caching-of-rendered-server-components)
5. Optimizations: Improved Image Component with native browser lazy loading. New Font Module with automatic font optimization. Source 1 (https://beta.nextjs.org/docs/optimizing/images), Source 2 (https://beta.nextjs.org/docs/optimizing/fonts)

Additionally, there are other improvements in Next.js 12.3, such as:

• New documentation on built-in accessibility features.
• create-next-app templates now include dark mode support automatically.
• src/ is now a default linting directory when using the integrated ESLint support.
• next.config.js now includes schema validation with ajv.
• An experimental config flag fallbackNodePolyfills: false in next.config.js to prevent Next.js from polyfilling Node.js APIs for the browser.

Source (https://nextjs.org/blog/next-12-3)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@frozen vigil kapa.ai is still learning and improving, please let us how it did by reacting below

[frozen vigil]

@magic sand unfortunately no solution from the bot.

[magic sand]

well we'll have to use our good old brains than 😄

[frozen vigil]

@magic sand there is nothing about websocket in the beta documentation. https://beta.nextjs.org/docs/routing/route-handlers

so it's not possible at the moment?

[magic sand]

try dont see why not...

but gotta try.

[frozen vigil]

I have this in /app/api/socket/route.ts

import { Server } from "socket.io";
// import messageHandler from "../../utils/sockets/messageHandler";

export default function SocketHandler(req: any, res: any) {
console.log("SocketHandler");

// It means that socket server was already initialised
if (res.socket.server.io) {
console.log("Already set up");
res.end();
return;
}

const io = new Server(res.socket.server);
res.socket.server.io = io;

const onConnection = (socket: any) => {
// messageHandler(io, socket);
};

// Define actions inside
io.on("connection", onConnection);

console.log("Setting up socket");
res.end();
}

And got: " 405 (Method Not Allowed)"

[magic sand]

yeah I dont have time to look into it right now. Dont know when I will get to it. Has to be a real use case. Its a new topic for me as well and time is very dense atm. Hope you understand 🙂

[frozen vigil]

Sure, thanks anyway.

[magic sand]

np

[frozen vigil]

@slim torrent any new info on websocket?

[slim torrent]

Let me check the knowledge base for you. One moment! :books:

---

Yes, there is an update related to WebSockets in Next.js. Starting from Next.js 12, the Hot Module Replacement (HMR) connection now uses a WebSocket instead of the previous server-sent events connection. This change may require you to update your proxy configuration or custom server setup.

For example, in nginx, you would need to add the following configuration:

location /_next/webpack-hmr {
    proxy_pass http://localhost:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

For custom servers, such as express, you may need to use app.all to ensure the request is passed correctly:

app.all('/_next/webpack-hmr', (req, res) => {
  nextjsRequestHandler(req, res);
});

Source (https://nextjs.org/docs/upgrading)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: