Integrate Laravel Reverb with NextJS 14 (Private Messaging Example)

Summary

This video demonstrates how to integrate Laravel Reverb into a Next.js application using a decoupled architecture, where the frontend and backend are separate. The tutorial walks through setting up real-time messaging between users, configuring Laravel broadcasting, initializing Laravel Echo in Next.js, and handling authentication tokens for secure communication. Using a simple chat example, viewers learn to broadcast events from Laravel 11 to Next.js 14, manage unread message notifications, and trigger animations and sounds upon message receipt. The guide emphasizes that these steps apply to various frontend frameworks, offering a comprehensive approach to real-time communication in modern web applications.

Takeaways

• 😀 Laravel Reverb can be integrated into a decoupled architecture where the frontend and backend are separate.
• 😀 The example application uses Laravel 11 as the backend API and Next.js 14 as the frontend.
• 😀 Laravel Echo and Pusher.js must be installed in the Next.js frontend to subscribe to channels and listen for broadcasting events.
• 😀 Environment variables from Laravel need to be copied and prefixed with NEXT_PUBLIC_ in the Next.js application.
• 😀 A custom React hook (`useEcho`) is created to initialize Laravel Echo and listen for real-time events in the frontend.
• 😀 Private channels in Laravel are configured using `Broadcast::channel` to ensure messages are sent to the correct recipient.
• 😀 Event classes, like `messageSent`, must implement `ShouldBroadcast` and include the receiver, sender, and message payload.
• 😀 API token authentication with Laravel Sanctum is required to authorize private broadcasting routes when the frontend is separate.
• 😀 Axios instances in Next.js should attach the bearer token to authorize requests to Laravel broadcasting endpoints.
• 😀 Real-time message notifications are displayed with animations and sound effects in the frontend without refreshing the page.
• 😀 The setup works with other frontend frameworks like Vue, Nuxt.js, Svelte, Gatsby, or Angular, as long as npm packages can be used.
• 😀 Compared to a monolith architecture, the decoupled approach requires more configuration but achieves full compatibility with Laravel Reverb.

Q & A

What is the main objective of the video?

The video demonstrates how to integrate Laravel Reverb into a Next.js application using a decoupled architecture, where the frontend and backend are in separate codebases.

What is the difference between a monolith and a decoupled architecture as mentioned in the video?

In a monolith architecture, the frontend and backend are in the same repository with preconfigured features, whereas in a decoupled architecture, the frontend and backend are separate, requiring additional configuration for integration.

Which frontend and backend frameworks are used in the example project?

The frontend is built using Next.js 14, and the backend API is powered by Laravel 11.

What frontend scaffolding is used for authentication in the project?

Laravel Breeze is used for authentication scaffolding, and it includes optional Laravel Sanctum for SPA authentication.

Which npm packages are required to integrate Laravel Reverb with Next.js?

The required packages are `laravel-echo` and `pusher-js`, which are installed in the Next.js application to handle real-time events.

How does the frontend receive real-time messages from the Laravel backend?

The frontend uses a custom React hook (`useEcho`) that initializes Laravel Echo, subscribes to private channels, and listens for broadcasted events from the Laravel backend.

What steps are necessary to authorize broadcasting requests from the frontend?

Laravel Sanctum API tokens are generated for logged-in users and attached to Axios request headers in the frontend, ensuring the broadcasting authentication route can authorize the requests.

How is the Laravel event for real-time messaging structured?

The `MessageSent` event implements the `ShouldBroadcast` contract, carries a payload containing the sender, receiver, and message, and broadcasts on a private channel named `chat.{receiver_id}`.

What additional frontend features are implemented when receiving a new message?

Upon receiving a message, the frontend updates the unread message count, triggers an animation, and plays an alert notification sound.

Can Laravel Reverb be used with other frontend frameworks aside from Next.js?

Yes, Laravel Reverb can be integrated with any frontend framework that supports npm packages, such as Vue, Nuxt, Svelte, Gatsby, or Angular, using a similar approach.

What are the key steps to ensure real-time messaging works in a decoupled setup?

The key steps are installing Laravel Echo and Pusher, configuring environment variables, initializing Echo in the frontend, setting up private channels and events in Laravel, authorizing requests with API tokens, broadcasting events from the backend, and handling the events in the frontend UI.

Why is integrating Laravel Reverb in a decoupled architecture more complex than in a monolith?

Because the frontend and backend are separate, additional steps like configuring CORS, handling API tokens for authorization, initializing Echo manually, and setting up private channels are required, which are preconfigured in a monolith setup.