Novu•2w ago

Trigger the workflow from the next.js app.

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.

29 Replies

Ask Inkeep•2w ago

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. ----------------------------- 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 ----------------------------- 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: 1. 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. 2. 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. 3. Triggering the Notification: - You need to use the 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' });
  }
}

- 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. 4. 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. 5. 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. 6. 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.

Kh. M-S.•2w ago

1) I create workflow

Kh. M-S.•2w ago

2) Its content is

Kh. M-S.•2w ago

Kh. M-S.•2w ago

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

Kh. M-S.•2w ago

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

Kh. M-S.•2w ago

Novu_Bot•2w ago

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

Kh. M-S.•2w ago

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

Kh. M-S.•2w ago

So I get notification when I trigger it in the web app. But do not get it when run from my next.js app. 6) The Novu component by which I get notifications is

Kh. M-S.•2w ago

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

Ask Inkeep•2w ago

Thanks for the follow-up, @Kh. M-S.. I'll get back to you soon. ----------------------------- 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 ----------------------------- Answer I'm sorry to hear that the previous suggestions didn't resolve the issue. Let's try a different approach to troubleshoot this: 1. 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. 2. 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. 3. 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 });
  }
}

- Replace <YOUR_NOVU_API_KEY>, workflow-identifier, and subscriber-id with your actual values. 4. 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. 5. 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. Got it. Tagging @Support for additional help.

Tomer Barnea•2w ago

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

Pawan Jain•2w ago

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

Kh. M-S.•2w ago

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

Pawan Jain•2w ago

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

Novu Manage Platform

Pawan Jain•2w ago

check if you see that trigger there? if not then there must be issue with subscriberId

Kh. M-S.•2w ago

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

Kh. M-S.•2w ago

And in the docker console I see

Kh. M-S.•2w ago

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

Pawan Jain•2w ago

Glad we could help 🙏

Kh. M-S.•2w ago

@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? Or I can choose also 'local' mode?

Pawan Jain•2w ago

keep REACT_APP_API_URL commented and use NODE_ENV=production

Gaming

Programming

Trigger the workflow from the next.js app.