Get Started with Next.js and Kafka

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:

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
}