Trigger the workflow from the next.js app.

Kh. M-S. · 2024-06-24T17:13:59.715Z

I created workflow. When i trigger it from web app I see notification in my app. But when I trigger it from my app I do not seen this new notification. I deploy novu locally and I work with my next.js app.

A

Ask Inkeep•6/24/24, 5:14 PM

Hi @Kh. M-S., I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question.

A

Ask Inkeep•6/24/24, 5:14 PM

-----------------------------
While I generate an answer, here are some sources that might be helpful:

React
How to send notifications with Next.js and React email
How to send notifications with Next.js and MJML
Demo apps
-----------------------------

A

Ask Inkeep•6/24/24, 5:14 PM

Answer

To trigger a workflow from your Next.js app using Novu and ensure the notification is visible, you need to ensure a few things are correctly set up. Based on the information from Novu's documentation, here's a general approach to troubleshoot and resolve the issue:

Ensure Workflow Creation: Make sure the workflow you created is properly configured in the Novu dashboard. This includes setting up the right triggers and actions.
API Key and Configuration: Ensure your Next.js app is correctly using the Novu API key. This key is essential for authenticating requests from your app to the Novu server.
Triggering the Notification:
- You need to use the
```
trigger
```
```
trigger
```
  method provided by the Novu Node.js SDK. Here's an example of how you might trigger a notification from an API route in your Next.js app:

import { Novu } from '@novu/node';

const novu = new Novu('<YOUR_NOVU_API_KEY>');

export default async function handler(req, res) {
  try {
    await novu.trigger('workflow-identifier', {
      to: {
        subscriberId: 'subscriber-id',
      },
      payload: {
        title: 'Notification Title',
        message: 'Notification Message',
      },
    });

    res.status(200).json({ message: 'Notification triggered successfully!' });
  } catch (error) {
    console.error('Error triggering notification:', error);
    res.status(500).json({ error: 'Failed to trigger notification' });
  }
}

import { Novu } from '@novu/node';

const novu = new Novu('<YOUR_NOVU_API_KEY>');

export default async function handler(req, res) {
  try {
    await novu.trigger('workflow-identifier', {
      to: {
        subscriberId: 'subscriber-id',
      },
      payload: {
        title: 'Notification Title',
        message: 'Notification Message',
      },
    });

    res.status(200).json({ message: 'Notification triggered successfully!' });
  } catch (error) {
    console.error('Error triggering notification:', error);
    res.status(500).json({ error: 'Failed to trigger notification' });
  }
}

import { Novu } from '@novu/node';

const novu = new Novu('<YOUR_NOVU_API_KEY>');

export default async function handler(req, res) {
  try {
    await novu.trigger('workflow-identifier', {
      to: {
        subscriberId: 'subscriber-id',
      },
      payload: {
        title: 'Notification Title',
        message: 'Notification Message',
      },
    });

    res.status(200).json({ message: 'Notification triggered successfully!' });
  } catch (error) {
    console.error('Error triggering notification:', error);
    res.status(500).json({ error: 'Failed to trigger notification' });
  }
}

import { Novu } from '@novu/node';

const novu = new Novu('<YOUR_NOVU_API_KEY>');

export default async function handler(req, res) {
  try {
    await novu.trigger('workflow-identifier', {
      to: {
        subscriberId: 'subscriber-id',
      },
      payload: {
        title: 'Notification Title',
        message: 'Notification Message',
      },
    });

    res.status(200).json({ message: 'Notification triggered successfully!' });
  } catch (error) {
    console.error('Error triggering notification:', error);
    res.status(500).json({ error: 'Failed to trigger notification' });
  }
}

A

Ask Inkeep•6/24/24, 5:14 PM

Replace `<YOUR_NOVU_API_KEY>` with your actual Novu API key, `workflow-identifier` with the identifier of the workflow you created, and `subscriber-id` with the ID of the subscriber who should receive the notification.
Local Deployment Issues: Since you mentioned deploying Novu locally, ensure that the local Novu server is accessible from your Next.js app. Check network configurations and firewall settings that might block requests between your local server and the app.
Check Logs: Review the logs in both your Next.js app and the Novu server. This can provide clues on whether the requests are reaching the Novu server and if they are processed correctly.
Subscriber Configuration: Ensure that the subscriber ID used in the trigger method matches the subscriber you have configured in your Novu dashboard.

By following these steps and using the correct configurations, you should be able to see notifications triggered from your Next.js app appearing in the app as expected.

If you continue to face issues, it might be helpful to double-check all configurations and ensure that there are no typos or misconfigurations in your setup.

K

Kh. M-S.OP•6/24/24, 5:15 PM

1) I create workflow

K

Kh. M-S.OP•6/24/24, 5:15 PM

K

Kh. M-S.OP•6/24/24, 5:16 PM

2) Its content is

K

Kh. M-S.OP•6/24/24, 5:16 PM

K

Kh. M-S.OP•6/24/24, 5:16 PM

3) I created novu folder with two functions which call to my two different api

K

Kh. M-S.OP•6/24/24, 5:17 PM

K

Kh. M-S.OP•6/24/24, 5:17 PM

4) The first one "registerNewSubscriber" works fine. I see new subscribers in my web app
But second one ("not1") does not work
The api corresponding to this function is

K

Kh. M-S.OP•6/24/24, 5:18 PM

N

Novu_Bot•6/24/24, 5:18 PM

@Kh. M-S., you just advanced to level 3!

K

Kh. M-S.OP•6/24/24, 5:20 PM

5) When I print the result from this api I get

K

Kh. M-S.OP•6/24/24, 5:21 PM

K

Kh. M-S.OP•6/24/24, 5:22 PM

So I get notification when I trigger it in the web app. But do not get it when run from my next.js app.

K

Kh. M-S.OP•6/24/24, 5:27 PM

6) The Novu component by which I get notifications is

K

Kh. M-S.OP•6/24/24, 5:27 PM

K

Kh. M-S.OP•6/24/24, 5:45 PM

@Ask Inkeep Thank you! But this answer does not help)

A

Ask Inkeep•6/24/24, 5:45 PM

Thanks for the follow-up, @Kh. M-S.. I'll get back to you soon.

A

Ask Inkeep•6/24/24, 5:45 PM

-----------------------------
While I generate an answer, here are some sources that might be helpful:

VanillaJS
How to send notifications with Next.js and React email
How to send notifications with Next.js and MJML
Expo Push
-----------------------------

A

Ask Inkeep•6/24/24, 5:45 PM

Answer

I'm sorry to hear that the previous suggestions didn't resolve the issue. Let's try a different approach to troubleshoot this:

Verify Workflow Configuration: Ensure that the workflow is properly configured to handle triggers from your Next.js app. Double-check the workflow conditions and actions in the Novu dashboard.
Check Subscriber Status: Make sure the subscriber ID used in your Next.js app is active and correctly configured in Novu. The subscriber must be set to receive notifications.
Log and Debug: Implement logging in your Next.js API route where you trigger the notification. Log the response from the Novu API to see if there are any error messages or issues in the request:

import { Novu } from '@novu/node';

const novu = new Novu('<YOUR_NOVU_API_KEY>');

export default async function handler(req, res) {
  try {
    const response = await novu.trigger('workflow-identifier', {
      to: {
        subscriberId: 'subscriber-id',
      },
      payload: {
        title: 'Notification Title',
        message: 'Notification Message',
      },
    });

    console.log('Novu response:', response);
    res.status(200).json({ message: 'Notification triggered successfully!' });
  } catch (error) {
    console.error('Error triggering notification:', error);
    res.status(500).json({ error: 'Failed to trigger notification', details: error });
  }
}

import { Novu } from '@novu/node';

const novu = new Novu('<YOUR_NOVU_API_KEY>');

export default async function handler(req, res) {
  try {
    const response = await novu.trigger('workflow-identifier', {
      to: {
        subscriberId: 'subscriber-id',
      },
      payload: {
        title: 'Notification Title',
        message: 'Notification Message',
      },
    });

    console.log('Novu response:', response);
    res.status(200).json({ message: 'Notification triggered successfully!' });
  } catch (error) {
    console.error('Error triggering notification:', error);
    res.status(500).json({ error: 'Failed to trigger notification', details: error });
  }
}

import { Novu } from '@novu/node';

const novu = new Novu('<YOUR_NOVU_API_KEY>');

export default async function handler(req, res) {
  try {
    const response = await novu.trigger('workflow-identifier', {
      to: {
        subscriberId: 'subscriber-id',
      },
      payload: {
        title: 'Notification Title',
        message: 'Notification Message',
      },
    });

    console.log('Novu response:', response);
    res.status(200).json({ message: 'Notification triggered successfully!' });
  } catch (error) {
    console.error('Error triggering notification:', error);
    res.status(500).json({ error: 'Failed to trigger notification', details: error });
  }
}

import { Novu } from '@novu/node';

const novu = new Novu('<YOUR_NOVU_API_KEY>');

export default async function handler(req, res) {
  try {
    const response = await novu.trigger('workflow-identifier', {
      to: {
        subscriberId: 'subscriber-id',
      },
      payload: {
        title: 'Notification Title',
        message: 'Notification Message',
      },
    });

    console.log('Novu response:', response);
    res.status(200).json({ message: 'Notification triggered successfully!' });
  } catch (error) {
    console.error('Error triggering notification:', error);
    res.status(500).json({ error: 'Failed to trigger notification', details: error });
  }
}

A

Ask Inkeep•6/24/24, 5:45 PM

Replace `<YOUR_NOVU_API_KEY>`, `workflow-identifier`, and `subscriber-id` with your actual values.
Network Issues: Since you are running Novu locally, ensure that there are no network issues preventing your Next.js app from communicating with the Novu server.
Check Payload and Trigger Conditions: Ensure the payload you send from your Next.js app matches the expected format and conditions set in your Novu workflow. Any mismatch in payload can prevent the workflow from triggering correctly.

If after checking these areas the issue persists, it might be beneficial to review the complete setup or reach out to Novu's support with specific logs and configurations to get more targeted help.

AAsk Inkeep - Replace `<YOUR_NOVU_API_KEY>`, `workflow-identifier`, and `subscriber-id` with...

A

Ask InkeepAPP•6/24/24, 5:52 PM

Got it. Tagging @Support for additional help.

T

Tomer Barnea•6/25/24, 5:25 AM

@Pawan Jain, @Moderator can you help us out here?

P

Pawan Jain•6/25/24, 7:05 AM

@Kh. M-S. do you see any update in activity feed?

K

Kh. M-S.OP•6/25/24, 7:09 AM

@Pawan Jain What is activity feed? And where I must see when it updated?

P

Pawan Jain•6/25/24, 7:10 AM

activity feed page url for our saas is
https://web.novu.co/activities

Novu Manage Platform

P

Pawan Jain•6/25/24, 7:11 AM

check if you see that trigger there?

if not then there must be issue with subscriberId

K

Kh. M-S.OP•6/25/24, 7:23 AM

@Pawan Jain Wow! Yes! I see this notification in the activity feed

K

Kh. M-S.OP•6/25/24, 7:23 AM

K

Kh. M-S.OP•6/25/24, 7:25 AM

And in the docker console I see

K

Kh. M-S.OP•6/25/24, 7:26 AM

K

Kh. M-S.OP•6/25/24, 7:31 AM

@Pawan Jain Solved! Thanks! I have not questions right now. Thank you very much for your fast answers!

P

Pawan Jain•6/25/24, 7:35 AM

Glad we could help

K

Kh. M-S.OP•6/25/24, 11:48 AM

@Pawan Jain Now I deploy community docker file on VPS. On my local machine I used 'local' for NODE_ENV. Now I must choose 'dev' mode? And do not uncomment REACT_APP_API_URL because I am not in local environment?

K

Kh. M-S.OP•6/25/24, 11:51 AM

Or I can choose also 'local' mode?

P

Pawan Jain•6/25/24, 1:00 PM

keep

REACT_APP_API_URL

REACT_APP_API_URL

commented and use

NODE_ENV=production

NODE_ENV=production

NODE_ENV=production

NODE_ENV=production

Trigger the workflow from the next.js app.

Answer

Answer

Similar Threads

Similar Threads

Answer

Answer

Similar Threads