Next.js
In this tutorial, we’ll create a Next.js app that calls a long-running background job using QStash.
Prerequisites
- 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 topics.
Was this page helpful?