Skip to content
Avatar of upstashupstash/qstash-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.

Framework
Use Case
Database
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

Contentful thumbnail for Get Started with Upstash QStash & Next.js
Avatar of upstashupstash/qstash-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.

Framework
Use Case
Database

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

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential