Get Started with Next.js and Kafka

Enes Akar
Upstash
Published in
Jan 3, 2022

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-nextjsCreating 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}

--

--