Estoy tratando de integrar FCM en mi aplicación Next.js. Tengo un enlace para manejar la mensajería, pero no recibe mis mensajes de prueba. El código no produce errores ni del lado del cliente ni del lado del servidor, y el registro muestra que la devolución de llamada onMessage está configurada, pero después de llamar a la API para enviar un mensaje de prueba, el cliente no ejecuta la devolución de llamada.

_app.tsx

 export default function MyApp({ Component, pageProps }: AppProps) { initializeFirebase(); useMessaging(); return <Component {...pageProps} />; }

ganchos.ts

 export function useMessaging() { const [user] = useAuthState(getAuth()); const [token, setToken] = useState<string | null>(null); useEffect(() => { // VAPID_KEY is imported from another file getToken(getMessaging(), { vapidKey: VAPID_KEY }) .then((token) => { setToken(token); onMessage(getMessaging(), (message) => { // For testing, log that the message was received console.log({ message }); }); }) }, []); useEffect(() => { if (user && token) { // For testing, log the token console.log({ token }); } }, [user, token]); }

/api/prueba.ts

 export default async function handler( req: NextApiRequest, res: NextApiResponse ) { const serviceAccount = JSON.parse( decodeURI((process.env as MoodGraphEnv).FIREBASE_SERVICE_ACCOUNT) ) as ServiceAccount; if (getApps().length === 0) { initializeApp({ credential: cert(serviceAccount), databaseURL: 'https://my-app-123456-default-rtdb.firebaseio.com', }); } const message: Message = { notification: { title: 'Hello world!', body: 'The notification worked!', }, token: // During testing I replace this with the token logged to the browser console 'token_goes_here', }; getMessaging() .send(message) .then((messagingResponse) => { console.log('Successfully sent message:', messagingResponse); }) .catch((error) => { console.log('Error sending message:', error); }); res.status(200).json({}); }

No estoy seguro de por qué no se ejecuta la devolución de llamada, por lo que agradecería cualquier ayuda.