How to send actionable in-app notifications with React Next.js ?

Let's add inapp-notifications into Nextjs in just a few simple steps using Engagespot.

1. Install Engagespot React Component from the npm registry.

npm i @engagespot/react-component or yarn add @engagespot/react-component

2. If you are using app-router, add 'use-client' in the page that you want to add Enagespot to, for client interactivity.

3. Import Engagespot and use it in any section of your app.

use client' import EngageSpot from '@engagespot/react-component

4. Signup to [Engagespot](https://engagespot.co)(It's free and open-source), as we need to issue a unique Api Key to identify your project.

5. Go to the `API Credentials` page in your admin console, and copy the `Api Key`.This is your unique `apiKey` which is used to identify your app.

6. For uniquely identifying the users in our app, we have a key called the `userId`. Since there are no users , we can create a user manually by clicking on the “Add Users” button in the `User` page of the admin console. Enter any unique value of your choice as the identifier and copy the Identifier key. This will create a user for your app, which we can use for testing.

7. Render the Engagespot Component, paste the code sample as below, and replace the `apiKey` and `userId` from above steps. Now we can see notification centre work in real time.

'use client'

import EngageSpot from '@engagespot/react-component'

<Engagespot 
apiKey={apiKey}
userId={userId}
/>

For testing purposes, let's fire off a notification manually. Head over to the `Compose` page in the admin console.

1. In Recipients field select the identifier you created previously.

2. In Notification title field enter any text of your choice.

3. Press Send Notification.

4. Hurray! Notification is sent, go check you Nextjs app to see a notification from Engagespot.

There you have it, a complete notification center within minutes.

The whole purpose of this blog was to show you how to integrate Engagespot in your frontend app. If you want to integrate with backend, read this [blog] https://engagespot.co/blog/how-to-build-a-realtime-notification-feed-in-your-react-app-with-node-backend too.

Engagespot also supports email, real-time in-app, web push, mobile push, WhatsApp, Slack, webhooks, and more. If you want to learn more, you can check out our documentation