Get started with Knock

First, create a Knock account if you don't already have one and log into the Knock dashboard.

Run the following command to create a new Next.js application.

Follow the CLI prompts and use all of the defaults selections, then run the following command to change into your project directory:

Install the following dependencies so you can use the Knock NotificationFeed component in your app and trigger workflows from server actions.

Run the following command to generate a new env.local file and add the following environment variables to authenticate your requests to Knock:

You can find your public and secret API keys under the Platform section of the Knock dashboard.

You can find the id of your Knock in-app feed channel in Settings > Integrations > Channels.

You'll need to create a component to render the default Knock components. Run the following command to create a new component file called inbox.tsx inside of the app:

Since this file uses client-side React APIs, it will need to be a client component. You can add the following code to the empty inbox.tsx file:

In production, you will want to colocate KnockProvider and KnockFeedProvider at a higher level in your application. If you pass a user that doesn't exist, Knock will automatically create one with the specified id using client-side inline identification.

Next, replace the contents of /app/page.tsx with the code below to import the Inbox component and render it in page.tsx.

Next, run your development server to render the Inbox component. There will be no messages, but you should be able to switch between tabs.

Next we'll design our first workflow in Knock via the dashboard.

A workflow encapsulates a notification in Knock. Each workflow takes a trigger call via the Knock API, runs the data you provide through a set of logic you configure, and outputs the actual messages that will be sent to your end users. All channel routing and message design takes place within the workflow.

Here's how to build your first workflow:

Create a workflow

Navigate to the Workflows section of the Knock dashboard. Click the "+ Workflow" button in the top right corner of the Knock dashboard. Name it knock-quickstart to test your integration.

Add an in-app channel step

To send a notification, a workflow needs at least one channel step. To add this step, we'll click “edit steps” to enter the workflow canvas editor.

Here we can see a number of steps available for us to add to our workflow, including functions (such as batch and delay) and channels.

Drag the 'In-app feed' step onto the workflow canvas.

Design the notification message

After adding your channel step, you can configure the notification's content by clicking on "Edit content" in the channel's edit step view to see that step's message template.

The template starts with default copy, so we'll just use that for now.

Commit the workflow to development

Knock follows a versioning model similar to Git. This means that before you can trigger your new workflow via the API, you'll need to commit it to your current environment to activate the workflow.

You do this using the Commit button in the header of the workflow canvas. You can review your changes using a diff viewer and leave a meaningful commit message about what has changed.

Now we're ready to trigger our workflow via the Knock API. You can also learn more about workflows and channels in Knock via our documentation on designing workflows.

Now, you'll trigger your workflow to notify your user using a server action. Run the following command to create a file named trigger.action.ts in the app directory:

When triggering workflows, you need to provide the following required data in your Knock API request:

• recipients – The list of users to notify. This list should contain the same user id you used when configuring the Inbox component.
• data – The variable data that will populate your notification templates. Here you'll include a object with a message key.

Add the code below to trigger.action.ts to trigger the knock-quickstart workflow.

Learn more about trigger calls in our API reference.

To trigger your workflow, you'll need to connect the server action in trigger.action.ts to a UI element in page.tsx. First, run the following command to create a new component file called workflow-trigger.tsx in the app directory:

This client component will import the triggerWorkflow server action and tie it to the onClick prop of a button. Replace the contents of workflow-trigger.tsx with the following code:

Next, add the WorkflowTrigger component to page.tsx. You can replace the contents of page.tsx with the following code:

With the server started, you can click the Trigger Workflow button and the application will run the triggerWorkflow server action and produce a notification in the feed.

Knock uses logically separated environments to control the roll-out of your notifications. When you're happy with the way your workflows work and look, you just need to promote them to production to start sending notifications to your real users.

See our going to production checklist to review a complete set of steps you'll need to take to push your workflows to production.

This was a simple overview to send your first notification with Knock. Read on to see how Knock can drive your notification needs, no matter their complexity.

• Learn about Knock's core data concepts
• Learn how to set up a real-time, in-app notification feed in minutes