Skip to content
Log InContact
Sign Up
← Back to Templates

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.

Deploy
View Demo
RepositoryAvatar of upstashupstash/qstash-js
Framework
Next.js
Use Case
Starter
CSS
Tailwind
Database
Upstash
Contentful thumbnail for Get Started with Upstash QStash & Next.js

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

npm install

2. Set environment variables

Create a 

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

QSTASH_CURRENT_SIGNING_KEY=
QSTASH_CURRENT_SIGNING_KEY_ID=

You can get these values from the Upstash Console.

3. Start the development server

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 to create a secure tunnel to your localhost.

ngrok http 3000

Copy the resulting url and. Go to the Upstash Console and send a simple request to 

<ngrok-url>/api/receiver

← Back to Templates
Contentful thumbnail for Get Started with Upstash QStash & Next.js

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.

Deploy
View Demo
RepositoryAvatar of upstashupstash/qstash-js
Framework
Next.js
Use Case
Starter
CSS
Tailwind
Database
Upstash

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

npm install

2. Set environment variables

Create a 

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

QSTASH_CURRENT_SIGNING_KEY=
QSTASH_CURRENT_SIGNING_KEY_ID=

You can get these values from the Upstash Console.

3. Start the development server

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 to create a secure tunnel to your localhost.

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

Next.js Boilerplate

Get started with Next.js and React in seconds.

by ▲ Vercel

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential