Next.js
QStash is a robust message queue and task-scheduling service that integrates perfectly with Next.js. This guide will show you how to use QStash in your Next.js projects, including a quickstart and a complete example.
Quickstart
At its core, each QStash message contains two pieces of information:
- URL (which endpoint to call)
- Request body (e.g. IDs of items you want to process)
The following endpoint could be used to upload an image and then asynchronously queue a processing task to optimize the image in the background.
Note that the URL needs to be publically available for QStash to call, either as a deployed project or by developing with QStash locally.
Because QStash calls our image processing task, we get automatic retries whenever the API throws an error. These retries make our function very reliable. We also let the user know immediately that their image has been successfully queued.
Now, let’s receive the QStash message in our image processing endpoint:
Just like that, we set up a reliable and asynchronous image processing system in Next.js. The same logic works for email queues, reliable webhook processing, long-running report generations and many more.
Example project
- Create an Upstash account and get your QStash token
- Node.js installed
Create Next.js app and install QStash
Create UI
After removing the default content in src/app/page.tsx
, let’s create a simple UI to trigger the background job
using a button.
Start Background Job
We can use QStash to start a background job by calling the publishJSON
method.
In this example, we’re using Next.js server actions, but you can also use route handlers.
Since we don’t have our public API endpoint yet, we can use Request Catcher to test the background job. This will eventually be replaced with our own API endpoint.
Now let’s invoke the startBackgroundJob
function when the button is clicked.
To test the background job, click the button and check the Request Catcher for the incoming request.
Create your own endpoint
Now that we know QStash is working, let’s create our own endpoint to handle a background job. This is the endpoint that will be invoked by QStash.
This job will be responsible for sending 10 requests, each with a 500ms delay. Since we’re deploying to Vercel, we have to be cautious of the time limit for serverless functions.
Now let’s update our startBackgroundJob
function to use our new endpoint.
There’s 1 problem: our endpoint is not public. We need to make it public so that QStash can call it. We have 2 options:
- Deploy our application to a platform like Vercel and use the public URL.
- Create a local tunnel to test the endpoint locally.
For the purpose, of this tutorial, I’ll deploy the application to Vercel, but feel free to use a local tunnel if you prefer.
Now that we have a public URL, we can update the URL.
And voila! You’ve created a Next.js app that calls a long-running background job using QStash.
Error catching and security
QStash is a great way to handle background jobs, but it’s important to remember that it’s a public API. This means that anyone can call your endpoint. Make sure to add security measures to your endpoint to ensure that QStash is the sender of the request.
Luckily, our SDK provides a way to verify the sender of the request. Make sure to get your signing keys
from the QStash console and add them to your environment variables. The verifySignatureAppRouter
will try to
load QSTASH_CURRENT_SIGNING_KEY
and QSTASH_NEXT_SIGNING_KEY
from the environment. If one of them is missing,
an error is thrown.
Let’s also add error catching to our action and a loading state to our UI.
Result
We have now created a Next.js app that calls a long-running background job using QStash! Here’s the app in action:
We can also view the logs on Vercel and QStash
And the code for the 3 files we created:
Now, go ahead and try it out for yourself! Try using some of the other features of QStash, like schedules, callbacks, and URL Groups.
Was this page helpful?