> ## Documentation Index
> Fetch the complete documentation index at: https://upstash-fix-issues-on-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://docs.upstash.com/kafka). 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:

```javascript
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](http://localhost:3000/api/hello)

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

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