Next.js와 모바일 푸시 알림 연동

18 Oct 2023

nextjs

이 글에서는 Next.js와 모바일 푸시 알림을 연동하는 방법에 대해 알아보겠습니다. 모바일 푸시 알림은 사용자에게 실시간으로 알림을 전송하고 앱 이용 경험을 향상시키는 강력한 도구입니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 지원하여 웹 애플리케이션을 보다 효율적으로 개발할 수 있게 해줍니다.

1. 모바일 푸시 알림 서비스 설정

먼저, 모바일 푸시 알림을 사용하기 위해서는 알림 서비스를 설정해야 합니다. 대표적인 모바일 푸시 알림 서비스로는 Firebase Cloud Messaging (FCM)이 있습니다. FCM은 구글의 클라우드 기반 메시징 솔루션으로 안드로이드 및 iOS 기기로 알림을 전송할 수 있습니다. 다른 푸시 서비스를 사용하려면 해당 서비스의 문서를 참조하세요.

2. FCM 설정 및 키 발급

Firebase 콘솔에 로그인하여 FCM 설정을 완료한 후, 앱 등록 단계에서 앱을 등록하고 앱에 대한 서버 키를 발급받아야 합니다. 발급받은 키는 나중에 Next.js 애플리케이션과 푸시 서비스를 연동할 때 사용됩니다.

3. Next.js 애플리케이션에 FCM 라이브러리 추가

Next.js 프로젝트에 FCM 라이브러리를 추가하여 앱과 푸시 서비스를 연결합니다. npm 또는 yarn을 사용하여 다음 명령어를 실행하여 라이브러리를 설치하세요.

npm install firebase-admin

또는

yarn add firebase-admin

4. 푸시 알림 발송 로직 구현

Next.js 애플리케이션에서 푸시 알림을 발송하기 위해 필요한 로직을 구현해야 합니다. 예를 들어, 사용자가 특정 이벤트에 대한 알림을 구독할 경우, 해당 이벤트가 발생했을 때 알림을 전송하는 로직을 구현할 수 있습니다. 이 로직은 Next.js의 서버 사이드 코드에서 작성됩니다.

const admin = require('firebase-admin');
const serviceAccount = require('./path/to/serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

const sendPushNotification = async (userId, message) => {
  // 사용자의 토큰을 가져오는 로직
  const userToken = await getUserToken(userId);

  const notificationPayload = {
    notification: {
      title: '새로운 알림이 도착했습니다!',
      body: message,
    },
  };

  try {
    // 푸시 알림 발송
    await admin.messaging().sendToDevice(userToken, notificationPayload);
    console.log('Push notification sent successfully!');
  } catch (error) {
    console.error('Error sending push notification:', error);
  }
};

5. 푸시 알림 발송 테스트

푸시 알림 발송 기능을 테스트하기 위해 Next.js 애플리케이션에서 특정 이벤트를 발생시켜보고, 알림이 정상적으로 전송되는지 확인합니다. 예를 들어, 사용자가 어떤 게시물에 댓글을 작성하면, 해당 사용자에게 푸시 알림을 보내는 테스트를 진행할 수 있습니다.

// Comment 작성 후 푸시 알림 발송
const handleCommentCreate = async (comment) => {
  // Comment 작성 로직

  // 푸시 알림 발송
  const userId = comment.userId;
  const message = '누군가가 당신의 게시물에 댓글을 작성했습니다!';
  await sendPushNotification(userId, message);
};

마무리

이제 Next.js와 모바일 푸시 알림을 연동하는 방법에 대해 알아보았습니다. Firebase Cloud Messaging을 사용하여 푸시 알림을 설정하고, Next.js 애플리케이션에 FCM 라이브러리를 추가한 후, 푸시 알림 발송 로직을 구현하고 테스트할 수 있습니다. 모바일 푸시 알림을 통해 사용자에게 실시간으로 정보를 전달하고, 앱 사용 경험을 향상시킬 수 있습니다.

더 자세한 내용은 Firebase Cloud Messaging 문서를 참조하세요.