Next.js

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

Create a Next.js application

This link can be copied right from the onboarding guide on the Novu Dashboard 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.

Manually add to an existing application (5 minutes)

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 Endpointt

App Router (app/api/novu/route.ts)


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

Pages Router (pages/api/novu.ts)


export default serve({ workflows: [testWorkflow] });

Add a Novu Secret Key Environment VariableAdd NOVU_SECRET_KEY environment variable to your .env

NOVU_SECRET_KEY=<NOVU_SECRET_KEY>

Create your workflow definitionAdd a novu folder that will contain your workflow definitions

app/novu/workflows.ts

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

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_APPLICATION_PORT>

Test your endpoint

Test your workflow by triggering it from the Local environment or using the Novu API:

curl -X POST https://api.novu.co/v1/events/trigger \
  -H 'Authorization: ApiKey YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "my-workflow",
    "to": "subscriber-id",
    "payload": {}
  }'

You should see the notification being processed in the Local environment.

Deploy your application

Deploy your application to your preferred hosting provider. Make sure the /api/novu endpoint is accessible from the internet.For local development and testing, you can use tools like ngrok to expose your local server to the internet.

Now that you have your first workflow running, you can:

Learn about Workflow Controls to expose no-code editing capabilities
Explore different Channel Steps like Email, SMS, Push, and more
Set up Action Steps like Delay and Digest
Check out our React Email integration for building beautiful email templates

Introduction

Express

⌘I

Getting Started

Core Concepts

Channels

Content

Advanced Features

API Reference

Deployment

Start your application

Test your endpoint

Deploy your application

​Start your application

​Test your endpoint

​Deploy your application

Start your application

Test your endpoint

Deploy your application