---
title: "Get Started with Upstash QStash & Next.js"
description: "A simple example to demonstrate Upstash QStash with Next.js. We will make a publish request through QStash and observe what's delivered."
url: "https://vercel.com/templates/next.js/get-started-with-upstash-qs-tash-and-next-js"
links:
  repository: "https://github.com/upstash/qstash-js/tree/main/examples/nextjs"
  demo: "https://qstash-nextjs.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Get+Started+with+Upstash+QStash+%26+Next.js&demo-description=A+simple+example+to+demonstrate+Upstash+QStash+with+Next.js.+We+will+make+a+publish+request+through+QStash+and+observe+what%27s+delivered.&demo-url=https%3A%2F%2Fqstash-nextjs.vercel.app%2F&project-name=Get+Started+with+Upstash+QStash+%26+Next.js&repository-name=get-started-with-upstash-qs-tash-and-next-js&repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fqstash-js%2Ftree%2Fmain%2Fexamples%2Fnextjs&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2NO0iBWkyw5hJkd6LkU7Wi%2Fe600de3a4c381e4650efd87a345003f0%2Fqstash-landing-page.png&skippable-integrations=1&stores=%255B%257B%2522integrationSlug%2522%253A%2522upstash%2522%252C%2522productSlug%2522%253A%2522upstash-qstash%2522%252C%2522type%2522%253A%2522integration%2522%257D%255D"
---

# Get Started with Upstash QStash & Next.js

A simple example to demonstrate Upstash QStash with Next.js. We will make a publish request through QStash and observe what's delivered.

# QStash With Next.js

This project is a simple example of how to use QStash with Next.js.

Routes in the project:

- `/api/edge` (pages router)
- `/api/receiver` (pages router)
- `/api/serverless` (pages router)

- `/edge` (app router)
- `/serverless` (app router)
- '/publish' (app router)

On the landing page of the project, you will find an introduction to QStash. You can click a button to call the `/publish` endpoint and observe the requests delivered by QStash.

## Local Development

### 1. Install dependencies

```bash
npm install
```

### 2. Set environment variables

Create a `.env.local` file in the root of the project and add the following environment variables:

```bash
QSTASH_CURRENT_SIGNING_KEY=
QSTASH_CURRENT_SIGNING_KEY_ID=
```

You can get these values from the Upstash Console.

### 3. Start the development server

```bash
npm run dev
```

### 4. Start a local tunnel

To test the application, QStash needs to send requests to your local server. You can use a tool like [ngrok](https://ngrok.com/) to create a secure tunnel to your localhost.

```bash
ngrok http 3000
```

Copy the resulting url and. Go to the Upstash Console and send a simple request to `<ngrok-url>/api/receiver`

## Related Templates

### [Next.js Boilerplate](https://vercel.com/templates/next.js/nextjs-boilerplate)

Get started with Next.js and React in seconds.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.