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).


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

export default function handler(req, res) {
      headers: {
          "Basic Wm5Wc2JDMzUwYVhNdE1UUXlPVDlUR2szT0ZkanZlWUhCVjlKanpvdzAzU25VdFJROjQtUi1mbXRvYWxYbm9ldTlUalFG5qZlNLd0VzRTEwWXZITWlXNjNoRmxqcVVycnE1X3lBcTRUUEdkOWM2SmJxZlE9PQ==",
    .then((response) => response.json())
    .then((data) => {

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

Run and Deploy

Now you can test your code by running:

npm run dev



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

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