Inbox Zero AI MCP

🚀 Next.js Gmail Push Notification Project

This project provides a solution for integrating Gmail push notifications into a Next.js application, enabling real - time email monitoring and processing.

🚀 Quick Start

Project Configuration

1. Create a New Next.js Project

Use the following command to create a brand - new Next.js project:

npx create-next-app next-door && cd next-door

2. Install Dependencies

Run the following command in the project root directory to install the necessary dependencies:

npm install nextjs googleapis @google-cloud/pubsub express cors dotenv

3. Configure Environment Variables

Create a .env file and add the following content (replace the placeholders with actual values):

GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
GOOGLE_PUBSUB_PROJECT_ID=your_project_id
GOOGLE_PUBSUB_TOPIC_NAME=your_topic_name
GOOGLE_PUBSUB_VERIFICATION_TOKEN=your_verification_token

4. Configure Next.js Environment Variables

Modify the next.config.js file to ensure that environment variables are available in the production environment:

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
    GOOGLE_PUBSUB_PROJECT_ID: process.env.GOOGLE_PUBSUB_PROJECT_ID,
    GOOGLE_PUBSUB_TOPIC_NAME: process.env.GOOGLE_PUBSUB_TOPIC_NAME,
    GOOGLE_PUBSUB_VERIFICATION_TOKEN: process.env.GOOGLE_PUBSUB_VERIFICATION_TOKEN
  }
};

module.exports = nextConfig;

Implement Gmail Push Notifications

1. Create PubSub Topic and Subscription

In the Google Cloud Console, navigate to the PubSub API and create a new topic. For example, you can name it inbox-zero-updates. Next, create a subscription to receive notifications from this topic. You can use ngrok in the development environment to handle the callback URL:

ngrok http --domain=your-domain.ngrok-free.app 3000

Then, in the PubSub console, configure the following properties for your subscription:

• Callback URL: https://your-domain.ngrok-free.app/api/google/webhook?token=TOKEN
• Verification Token: GOOGLE_PUBSUB_VERIFICATION_TOKEN set in the .env file
• Push Protocol: Select HTTP

2. Implement Webhook Handling

In your Next.js application, create an API route to handle Google's push notifications:

import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req, res) {
  if (req.method !== 'POST') {
    res.status(405).json({ message: 'Method not allowed' });
    return;
  }

  // Verify the token and handle push notifications
  const verificationToken = req.query.token;
  if (!verificationToken || verificationToken !== process.env.GOOGLE_PUBSUB_VERIFICATION_TOKEN) {
    res.status(401).json({ message: 'Unauthorized' });
    return;
  }

  // Process the actual push data
  const data = JSON.parse(req.body);
  console.log('Received email notification:', data);

  res.json({ message: 'Notification processed successfully' });
}

3. Set Up Email Monitoring

To ensure that your application can receive email notifications in real - time, you need to regularly check for changes in the Gmail API. To do this, you can set up a cron job to call the /api/google/watch/all endpoint every certain period (e.g., every 5 minutes).

Configure Cron Jobs

Create a crons.json file in the project root directory and add the following content:

{
  "crons": [
    {
      "path": "/api/google/watch/all",
      "schedule": "0 */5 * * *"
    }
  ]
}

Use Upstash to run cron jobs. You can configure it according to the Upstash documentation.

Complete Code Examples

1. pages/_app.tsx

import { NextApp } from 'next/app';
import type { AppProps } from 'next/app';

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

2. pages/index.tsx

import { useState, useEffect } from 'react';

export default function Home() {
  const [emailNotifications, setEmailNotifications] = useState([]);

  useEffect(() => {
    // Regularly check for changes in the Gmail API
    const interval = setInterval(() => {
      fetch('/api/google/watch/all')
        .then((response) => response.json())
        .then((data) => setEmailNotifications(data))
        .catch((error) => console.error('Error:', error));
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>Real - time Email Notifications</h1>
      <ul>
        {emailNotifications.map((notification, index) => (
          <li key={index} >{notification.subject}</li>
        ))}
      </ul>
    </div>
  );
}

3. api/google/watch/all.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import { google } from 'googleapis';

export default function handler(req, res) {
  const oauth2Client = new google.auth.OAuth2({
    client_id: process.env.GOOGLE_CLIENT_ID,
    client_secret: process.env.GOOGLE_CLIENT_SECRET
  });
  // The rest of the code is not provided in the original, so it is not continued here
}