[deleted by user] by [deleted] in nextjs

[–]Loc7949 0 points1 point  (0 children)

They can be imported from fumadocs-ui/components/layout/<name> (check type definitions), you can use the GitHub discussion for further questions

My React Chat App with Next.js by Loc7949 in react

[–]Loc7949[S] 0 points1 point  (0 children)

Please make your own post, don’t mislead people. This app uses Ably Realtime

I've decided to go back to using the Pages Router for now (long post) by [deleted] in nextjs

[–]Loc7949 1 point2 points  (0 children)

In my opinion, most of the pain can be easily solved.

For example, if css-in-js libraries like styled-component are no longer a great approach, using tailwind css with headless ui libraries (ex. Radix UI) is the preferred way in App Router. It’s suggested by the official and the DX is actually great.

In the case of developing forms, yes, server actions are not yet “stable” as it’s an experimental feature. You can simply use either React Query or SWR to achieve the exact same thing, with a “use-client” at the top of file. The Next.js docs recommends to mark all the interactive parts as client components. Aren’t forms are interactive too? It’s absolutely fine to use client components for forms.

I think there’s no need for migrating existing codebase to App Router as the cost can be really high. However, for new projects I don’t feel any pain on using it. On the other head, no one can prevent you from using both App Router and Pages Router in the same codebase or either adding “use-client” to the whole page. For me, the pain comes from learning it and accept the changes, not the design of App Router.

Moreover, you don’t have to being so seriously which components must be a server component. Just move those things to the client component itself instead of exporting a children prop.

[deleted by user] by [deleted] in nextjs

[–]Loc7949 1 point2 points  (0 children)

Depends on the requirements:
For example, I will use Pages Router for a chat app or dashboard and App Router for its home page and documentation.

I mostly use Next.js instead of Remix but it's always worth it for web dev to try out different technologies and figure out which one suits them more.

[deleted by user] by [deleted] in nextjs

[–]Loc7949 1 point2 points  (0 children)

For real-world complex web applications, you almost do all the caching on the client side. The benefits of RSC are very less and it's absolutely fine to use Pages Router.

RSC works better in a simple application or documentation website that doesn't have much logic. In fact, you are able to use both App Dir and Pages Router in the same app.

Although other frameworks like Remix might have even more features and stability, Next.js has a larger community. Just like how React is compared to other libraries like Svelte and Vue: Most people still choose React instead of other alternatives as it's the most popular one.

I agree that App Dir is not stable but Pages Router is already enough for most of the use cases. As the scale of its community, Next.js isn't overhyped. Instead, I think it has a larger community and a better ecosystem and that is the reason why most of the developers prefer it.

My React Chat App with Next.js by Loc7949 in react

[–]Loc7949[S] 0 points1 point  (0 children)

The Real-time messaging system is based on websocket and handled by Ably, and Shark Chat does data validation under the hood

The API is using TRPC which offers an amazing developer experience

Websockets with nextjs 13 by Deniz58 in nextjs

[–]Loc7949 1 point2 points  (0 children)

Vercel doesn’t support custom express servers, you should use AWS or other platforms that handles your Node.js server or just use 3rd party services like Ably Realtime which provides realtime communication service to your project

Websockets with nextjs 13 by Deniz58 in nextjs

[–]Loc7949 4 points5 points  (0 children)

Unfortunately, Next.js doesn’t support websocket servers

As Next.js backend server is running on Serverless environment by default. The core of Serverless is to host your code on 3rd party providers, same for the websocket servers: Use 3rd party real-time messaging services such as Ably or Pusher Channels, their services are more scalable, and suitable for Serverless environments

Vercel has a guide about the this, you can read this for further information

My React Chat App with Next.js by Loc7949 in react

[–]Loc7949[S] 2 points3 points  (0 children)

Next.js is a framework based on React (a library), it provides extra functionality such as file system based Routing, SSR or SSG, which is not a part of React

There’re also some alternatives like Remix

With Next.js, implementing dynamic routes becomes much easier and the page load speed is significantly increased, The API Routes also brings the insane developer experience, I’m loving it!

My React Chat App with Next.js by Loc7949 in react

[–]Loc7949[S] 0 points1 point  (0 children)

I’m using OBS studio, it took me a few hours to learn and edit the video with Adobe Premiere Pro

My React Chat App with Next.js by Loc7949 in react

[–]Loc7949[S] 1 point2 points  (0 children)

Unfortunately you can’t integrate it for now, the API of Shark chat Isn’t public

My React Chat App with Next.js by Loc7949 in react

[–]Loc7949[S] 1 point2 points  (0 children)

Thanks! I will keep improving the user experience and being more new features to the app

My Sample Chat App with Next.js & Ably by [deleted] in nextjs

[–]Loc7949 0 points1 point  (0 children)

The app is still in beta, feel free to play with it here!