Get Started with Next.js and Kafka

This tutorial shows how to use Upstash Kafka with Next.js.

In this post, we will implement the most simple application where we will publish messages to Kafka from a Next.js application.

Project Setup

First create a Next project with:

➜  kafka-examples git:(master) ✗ npx create-next-app@latest
✔ What is your project named? … getstarted-nextjs
Creating a new Next.js app in /Users/enes/dev/kafka-examples/getstarted-nextjs.

Then create an Upstash Kafka cluster and a topic as explained here. In the cluster page, under the REST API section, copy the producer code under the tab Javascript (fetch).

Implementation

Paste the producer code to the pages/api/hello.js as below:

export default function handler(req, res) {
  fetch(
    "https://full-mantis-14079-us1-rest-kafka.upstash.io/produce/newtopic/MESSAGE",
    {
      headers: {
        Authorization:
          "Basic Wm5Wc2JDMzUwYVhNdE1UUXlPVDlUR2szT0ZkanZlWUhCVjlKanpvdzAzU25VdFJROjQtUi1mbXRvYWxYbm9ldTlUalFG5qZlNLd0VzRTEwWXZITWlXNjNoRmxqcVVycnE1X3lBcTRUUEdkOWM2SmJxZlE9PQ==",
      },
    }
  )
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
    });

  res.status(200).json({ name: "John Doe" });
}

Run and Deploy

Now you can test your code by running:

npm run dev

Check:

http://localhost:3000/api/hello

In the logs you should see the output of Kafka like below:

{
  "topic": "newtopic",
  "partition": 0,
  "offset": 281,
  "timestamp": 1640993860432
}