How to send notifications with Next.js and Novu Framework

In this guide, we will add a Novu Bridge Endpoint to a Next.js application and send our first test workflow.

Run the Local Studio

The Local Studio is where you will build your notification workflows and craft the controls that will be exposed for your non-technical peers to maintain after your workflow is pushed to your Development or Production environments.

npx novu@latest dev

The dev command is your go-to command whenever you want to build and preview your changes before syncing to cloud. By default, it will start a secure tunnel that our durable cloud workflow engine will be able to communicate with, and the Local Studio web service listening on http://localhost:2022

Create a Next.js application

This link can be copied right from the onboarding guide on the Novu Studio or can always be copied from the API Keys page on the Novu Dashboard.

npx novu init --secret-key=<YOUR_NOVU_SECRET_KEY>

The sample application will create an .env file containing the NOVU_SECRET_KEY environment variable required for securing your endpoint. And a sample workflow demonstrating the flexibility of Novu using Step Controls.

Install required packages

npm install @novu/framework @react-email/components react-email zod zod-to-json-schema

This will install

@novu/framework SDK Package
React Email (Recommended) - For writing your email templates with React
Zod (Recommended) - For end-to-end type safety for your Payload and Step Controls

Add a Novu API Endpoint

import { serve } from "@novu/framework/next";
import { myWorkflow } from "../../novu/workflows";

export const { GET, POST, OPTIONS } = serve({ workflows: [myWorkflow] });

Add a Novu Secret Key Environment Variable

Add NOVU_SECRET_KEY environment variable to your .env

NOVU_SECRET_KEY=<NOVU_SECRET_KEY>

Create your workflow definition

Add a novu folder that will contain your workflow definitions

app/novu/workflows.ts

import { workflow } from '@novu/framework';
import { renderEmail } from './emails/test-email';
import { z } from 'zod';

export const testWorkflow = workflow('test-workflow', async ({ step, payload }) => {
    await step.email('send-email', async (controls) => {
        return {
            subject: controls.subject,
            body: renderEmail(payload.userName),
        };
    },
    {
        controlSchema: z.object({
            subject: z.string().default('A Successful Test on Novu from {{userName}}'),
        }),
    });
}, {
    payloadSchema: z.object({
        userName: z.string().default('John Doe'),
    }),
});

Create your React Email Template (Optional)

Add a new email template

app/novu/emails/test-email.tsx

import {
    Body,
    Container,
    Head,
    Html,
    render,
} from '@react-email/components';
import * as React from "react";

interface TestEmailProps {
    name: string
}

export const TestEmailTemplate = ({ name }: TestEmailProps) => {
    return (
        <Html>
            <Head />
            <Body>
                <Container>
                    Hello {name} welcome to your first React E-mail template!
                </Container>
            </Body>
        </Html>
    );
};

export default TestEmailTemplate;

export function renderEmail(name: string) {
    return render(<TestEmailTemplate name={name} />);
}

Start your application

To start your boilerplate Next.js server with the Novu Endpoint configured, run the following command:

cd my-novu-app && npm run dev

The sample application will start on https://localhost:4000 and your novu endpoint will be exposed at /api/novu served by the Next.js API.

If your Next.js application is running on other than 4000 port, restart the novu dev command with the port:

npx novu@latest dev --port <YOUR_NEXTJS_PORT>

Test your workflow

After your application is up and running, visit the Local Studio interface that was started on http://localhost:2022 by running the npx novu dev command on the first step.

The onboarding guide will guide you to send the newly created sample workflow to your e-mail address.

Deploy your application

Once you have finished refining your first workflow, it’s time to sync your local changes to Novu Cloud. Novu recommends deploying your workflows similarly to how you will deploy the features that generate those notifications using your CI/CD pipeline or our CLI command.

Read more about syncing your changes to the cloud.

Next Steps

Build Workflows

Learn how to build workflows with the Novu Framework.

Explore the framework SDK

Learn more about the Novu Framework SDK

Inbox

Add the Inbox component to your application with our front-end SDK.

Deploy

Deploy your workflows to Development and Production

Getting Started

Quickstart

Concepts

Build Workflows

Deploy

Account

Additional Resources

How to send notifications with Next.js and Novu Framework

Next Steps

Build Workflows

Explore the framework SDK

Inbox

Deploy

Getting Started

Quickstart

Concepts

Build Workflows

Deploy

Account

Additional Resources

​Next Steps

Build Workflows

Explore the framework SDK

Inbox

Deploy

Next Steps