nextnative

Intermediate45 minutesUpdated October 2025

How to Add Push Notifications to Your Next.js Mobile App

Implement push notifications in your Next.js mobile app using Capacitor's Push Notifications plugin and Firebase Cloud Messaging. Send notifications to iOS and Android users.

📋 Prerequisites

  • Next.js app with Capacitor configured
  • Firebase project created
  • Apple Developer account (for iOS)
  • Google Play Console access (for Android)

🎯 What You'll Learn

  • Set up Firebase Cloud Messaging
  • Configure iOS push notification certificates
  • Configure Android push notifications
  • Request notification permissions
  • Handle incoming notifications
  • Send test notifications

Step-by-Step Guide

1

Install Push Notifications Plugin

Install the Capacitor Push Notifications plugin in your project.

npm install @capacitor/push-notifications
npx cap sync
2

Set Up Firebase Project

Create a Firebase project if you haven't already, then add iOS and Android apps to your Firebase project. Download the configuration files.

💡 Note: Download google-services.json (Android) and GoogleService-Info.plist (iOS) from Firebase Console.

3

Configure iOS Push Notifications

Add the GoogleService-Info.plist to your Xcode project and enable Push Notifications capability.

1. Open your project in Xcode: npx cap open ios
2. Drag GoogleService-Info.plist into the App folder
3. Go to Signing & Capabilities
4. Click + Capability → Push Notifications
5. Add Background Modes → Remote notifications

💡 Note: You'll also need to create an APNs key in your Apple Developer account and upload it to Firebase.

4

Configure Android Push Notifications

Add the google-services.json file to your Android project.

# Copy google-services.json to android/app/
cp google-services.json android/app/
5

Request Notification Permissions

Create a hook or component to request notification permissions when your app launches.

hooks/usePushNotifications.ts
import { useEffect } from 'react';
import { PushNotifications } from '@capacitor/push-notifications';

export function usePushNotifications() {
  useEffect(() => {
    // Request permission
    PushNotifications.requestPermissions().then(result => {
      if (result.receive === 'granted') {
        // Register with Apple / Google
        PushNotifications.register();
      }
    });

    // Listen for registration
    PushNotifications.addListener('registration', token => {
      console.log('Push token:', token.value);
      // Send token to your backend
    });

    // Listen for push notifications
    PushNotifications.addListener('pushNotificationReceived', notification => {
      console.log('Notification received:', notification);
    });

    // Handle notification tap
    PushNotifications.addListener('pushNotificationActionPerformed', action => {
      console.log('Notification action:', action);
    });
  }, []);
}
6

Use the Hook in Your App

Import and use the push notifications hook in your root layout or app component.

app/layout.tsx
'use client';
import { usePushNotifications } from '@/hooks/usePushNotifications';

export default function RootLayout({ children }) {
  usePushNotifications();
  
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}
7

Send a Test Notification

Use Firebase Console to send a test notification to your device.

1. Go to Firebase Console → Cloud Messaging
2. Click "Send your first message"
3. Enter notification title and text
4. Click "Send test message"
5. Paste your device token
6. Click "Test"

💡 Note: Your app must be running on a real device (not simulator) to receive push notifications.

8

Handle Notification Actions

Navigate users to specific screens when they tap notifications.

PushNotifications.addListener(
  'pushNotificationActionPerformed',
  (action) => {
    const data = action.notification.data;
    
    // Navigate based on notification data
    if (data.screen === 'profile') {
      router.push('/profile');
    } else if (data.screen === 'post') {
      router.push(`/posts/${data.postId}`);
    }
  }
);

🚀 Next Steps

  • Set up a backend to send notifications programmatically
  • Implement notification badges
  • Add rich notifications with images
  • Set up notification channels (Android)
  • Track notification analytics

Ready to Build Your Mobile App?

Get NextNative and start converting your Next.js website to a mobile app in minutes.

🎁50% off for the first 40 customers, 5 left

Related Tutorials

beginner30 minutes

How to Convert Your Next.js App to iOS & Android

Learn how to transform your Next.js web application into fully functional iOS and Android mobile apps using Capacitor. This guide covers installation, configuration, and deployment to app stores.

intermediate60 minutes

How to Add In-App Purchases to Your Next.js App

Monetize your Next.js mobile app with in-app purchases and subscriptions using RevenueCat. This guide covers setup, implementation, and testing for both iOS and Android.

Compare Mobile Frameworks

Still deciding on your tech stack? Check out these comparisons

Next.js vs React Native

Next.js + Capacitor vs React Native

Capacitor vs React Native

Capacitor vs React Native

Capacitor vs Flutter

Capacitor vs Flutter

📚 Further Reading

Explore our comprehensive documentation to learn more about NextNative features and capabilities.

📖 Full Documentation

Complete guides, API references, and best practices for building mobile apps with NextNative.

🚀 Quick Start Guide

Get your app up and running in just 5 minutes with our quick start tutorial.

🔔 Push Notifications

Learn how to set up and customize push notifications for your mobile app.

💰 In-App Purchases

Implement monetization with in-app purchases using RevenueCat integration.