DocumentationDocumentation
DocumentationGuidesFrameworkCommunityAPI Reference
Sign InSign Up

GitHubnovuhq/novu

36.6K

Quickstart

Next.js Quickstart

Get started with Novu Framework in a Next.js application

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

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

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:

Edit on GitHub

Previous

NestJS

Next

Nuxt

On this page