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
Install Push Notifications Plugin
Install the Capacitor Push Notifications plugin in your project.
npm install @capacitor/push-notifications
npx cap syncSet 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.
Download google-services.json (Android) and GoogleService-Info.plist (iOS) from Firebase Console.
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 notificationsYou'll also need to create an APNs key in your Apple Developer account and upload it to Firebase.
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/Request Notification Permissions
Create a hook or component to request notification permissions when your app launches.
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);
});
}, []);
}Use the Hook in Your App
Import and use the push notifications hook in your root layout or app component.
'use client';
import { usePushNotifications } from '@/hooks/usePushNotifications';
export default function RootLayout({ children }) {
usePushNotifications();
return (
<html>
<body>{children}</body>
</html>
);
}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"Your app must be running on a real device (not simulator) to receive push notifications.
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}`);
}
}
);Related Tutorials
How to Convert Your Next.js App to iOS & Android
Learn how to convert your Next.js web application into fully functional iOS and Android mobile apps using Capacitor.
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
📚 Ship mobile apps faster
Explore detailed documentation to see features and shortcuts NextNative gives you to ship mobile apps faster.
📖 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.