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

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 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} />);
}
2

​
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>
3

​
Test your endpoint

Test your workflow by triggering it from the Local Studio 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 your Local Studio.
4

​
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: