This repository demonstrates a proof of concept (PoC) for integrating Monday.com's GraphQL API with Next.js. The project establishes a secure API layer within a Next.js app that successfully connects to and queries Monday.com. While the current implementation is minimal and does not yet manipulate data, it serves as a foundation for further development.

Monday.com > NextJS POC Board [email protected] demo2025

A live version of this demo is available at: https://monday.goldlabel.pro

• Frontend: A basic Next.js PWA that interacts with the API layer.
• Backend: A Next.js API route that securely connects to Monday.com's GraphQL API.

This file contains the API logic that interacts with Monday.com's GraphQL API. It serves as a bridge between the frontend and Monday.com, handling authentication and requests.

🔗 View API route

The primary UI component that interacts with the API. It fetches data from the Next.js backend and displays responses.

🔗 View Frontend Page

• Node.js 18+
• A Monday.com account
• A Monday.com API Key
• Next.js installed globally (optional)

1. Clone this repository:

   git clone https://github.com/javascript-pro/monday-nextjs.git
   cd monday-nextjs

2. Install dependencies:

   npm install  # or yarn install

3. Set up environment variables: Create a .env.local file in the root directory and add your Monday.com API key:

   MONDAY_API_KEY=your_monday_api_key_here

4. Run the development server:

   npm run dev  # or yarn dev

5. Open http://localhost:1997 in your browser to see the demo in action.

• Implement CRUD operations to create, update, and delete items within Monday.com.
• Improve the UI to make data visualization clearer.
• Enhance error handling and authentication security.

• Next.js – Full-stack React framework
• Monday.com API – GraphQL API for data retrieval
• TypeScript – Type safety and maintainability