As developers, we often seek efficient ways to receive immediate notifications and logs from our applications when users engage in key activities. Imagine you're launching a SaaS platform or a Shopify store; the ability to get real-time notifications for new user sign-ups or customer purchases can be incredibly valuable.

Traditionally, developers have resorted to using Slack, Telegram, or Discord, leveraging their Webhook or chatbot APIs to send messages and receive push notifications. However, this approach can be cumbersome, insecure, and quite limited.

NotifyLog revolutionizes this process by offering a secure and straightforward solution for web developers to publish events directly from the frontend. With the introduction of Public API Tokens, NotifyLog ensures that developers can safely implement event tracking in their client-side code without the fear of token theft or misuse.

In this blog post, we'll guide you through the process of publishing events from a application. Let's dive into creating a landing page with React and track an event each time a user subscribes to our newsletter. Here's how we begin our journey with a fresh Next.js 14 app.

Setting Up Your Next.js Project

First, ensure you have a Next.js 14 project set up. If you're new to Next.js, you can create a project with the following command:

npx create-next-app@latest my-next-app --typescript
cd my-next-app

Integrating NotifyLog for Notification Delivery

Install NotifyLog SDK in your project:

npm install notifylog

To effectively send events within your Next.js application, you'll need to generate a NotifyLog API token:

1. Log in to your NotifyLog account.
2. Navigate to the "Integrations" section in the settings.
3. Copy the generated API token.

Once you have the API token, you can set it up in your Next.js application:

1. Open the lib/notifylog.ts file in your project.
2. Import the NotifyLog class from the notifylog package.
3. Create a new instance of the NotifyLog class, passing the API token as a parameter.
4. Export the notifylog instance.

Here's an example of how the code should look like:

// lib/notifylog.ts
import { NotifyLog } from 'notifylog';

export const notifylog = new NotifyLog("YOUR_API_TOKEN_HERE");

Make sure to replace "YOUR_API_TOKEN_HERE" with the actual API token you generated.

With the NotifyLog API token set up, you can now start sending events from your Next.js application.

// lib/notifylog.ts
import { NotifyLog } from 'notifylog';

export const notifylog = new NotifyLog("YOUR_API_TOKEN_HERE")

Creating a simple form

In this step, we will create a simple contact form that users can fill out to send messages directly from your Next.js application. The form will collect the user's email, subject, and message. Once submitted, these details will be sent to the NotifyLog service, which will then publish the event to the specified channel.

This use case demonstrates how you can integrate NotifyLog into your Next.js application to enhance user engagement by providing immediate feedback when a user submits a form. The code snippet below shows how to set up the form and the corresponding handler function.

export default function Page() {
  async function handleSubmit(formData: FormData) {
    'use server'

    try {
      await notifylog.publish({
        event: "contact-form-submission",
        title: "New Contact Form Submission",
        description: `${formData.get('email')} just submitted the contact form.`,
        channel: "contact-form",
        icon: "🎉",
        notify: true,
        properties: {
          email: formData.get('email'),
          subject: formData.get('subject'),
          message: formData.get('message')
        },
        identity: {
          email: formData.get('email')
        }
      });
      alert('Your message has been sent successfully!');
    } catch (error) {
      console.error('Error sending message:', error);
      alert('There was an error sending your message.');
    }
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" required />

      <label htmlFor="subject">Subject:</label>
      <input type="text" id="subject" name="subject" required />

      <label htmlFor="message">Message:</label>
      <textarea id="message" name="message" required></textarea>

      <button type="submit">Send Message</button>
    </form>
  );
}

Viewing Your Event on the NotifyLog Dashboard

After sending a message through the contact form, you can view the event on the NotifyLog Dashboard. This allows you to see all the submissions in real-time and keep track of user interactions. To view the event:

1. Log in to your NotifyLog account.
2. Navigate to the 'Events' section.
3. Find the event titled "New Contact Form Submission".
4. Click on the event to view the details, such as the user's email, subject, and message.

This step ensures that you can monitor and manage user submissions efficiently, all from the NotifyLog Dashboard.

Conclusion

In this post, we've delved into the integration of NotifyLog with Next.js to streamline real-time notifications for user activities. By leveraging NotifyLog's capabilities, we can ensure that key user interactions are captured and communicated instantly, enhancing engagement and responsiveness.

Eager to elevate your user notification experience? Begin with NotifyLog to tap into the power of real-time updates and ensure you're always connected to your user's actions. Remember to sign up for NotifyLog to start receiving instant event notifications and follow me on Twitter for more insights and updates on cutting-edge web development practices.