Sending a notification in the Next.js Supabase Starter Kit
Learn how to send a notification in the Next.js Supabase Starter Kit.
Makerkit allows you to send notifications using the @kit/notifications
package. The package provides a simple API to send notifications.
Notifications
Learn how to send notifications in the Next.js Supabase Starter Kit.
Notifications API
The createNotificationsApi
provides an easy to use API to send notifications. You can send notifications to users after they sign up, create a task, or perform any other action.
The service is a server-side service, so you can use it in your server actions or route handlers. This service cannot be used from the client-side since the only role who can insert notifications is the service_role
role.
Here is a super simple example of how you can send a notification after a user signs up.
import { createNotificationsApi } from '@kit/notifications/api';import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';async function sendNotificationAfterSignup( accountId: string,) { const client = getSupabaseServerAdminClient(); const api = createNotificationsApi(client); await api.createNotification({ account_id: accountId, body: 'You have successfully signed up!', });}
In this example, we are sending a notification to the user after they sign up. The account_id
is the ID of the user who signed up, and the body
is the message that will be displayed in the notification.
Users will see the notifications if:
- they're sent to their own account
- they're sent to a team they're a member of
Notification channels
You can send notifications to different channels using the channel
field. For example, you can send a notification to the email
or in_app
. In-app notifications will be displayed in the app, while email notifications will be sent to the user's email. By default, notifications are sent to the in_app
channel.
The createNotificationsApi
function takes the client
parameter - eg. the Supabase client.
import { createNotificationsApi } from '@kit/notifications/api';import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';async function sendNotificationAfterSignup( accountId: string,) { const client = getSupabaseServerAdminClient(); const api = createNotificationsApi(client); await api.createNotification({ account_id: accountId, body: 'You have successfully signed up!', channel: 'email', });}
The example above sends an email notification to the user after they sign up.
NB: this require a Database trigger to send the email notification! Please dont't forget to add the trigger in your database.
NB: at the time of writing, this is not yet implemented in the Next.js Supabase Starter Kit. It is a feature that is planned for the future.
Notification types
You can send different types of notifications using the type
field. For example, you can send a info
, warning
, or error
notification.
By default, notifications are sent as info
.
import { createNotificationsApi } from '@kit/notifications/api';import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';async function sendNotificationAfterSignup( accountId: string,) { const client = getSupabaseServerAdminClient(); const api = createNotificationsApi(client); await api.createNotification({ account_id: accountId, body: 'You have successfully signed up!', type: 'info', // this is the default type, no need to specify it });}
Warning notifications
To send a warning notification, you can use the warning
type.
api.createNotification({ account_id: accountId, body: 'Your credit card is about to expire!', type: 'warning',});
Error notifications
To send an error notification, you can use the error
type.
api.createNotification({ account_id: accountId, body: 'There was an error processing your payment.', type: 'error',});
Notification Links
You can also include a link in the notification using the link
field. This will create a clickable link in the notification.
api.createNotification({ account_id: accountId, body: 'You have created a task!', link: '/tasks/123',});
The example above sends a notification to the user after they create a task. The notification will include a link to the task.