How to Set Up Queue Jobs in NextJS Using BullMQ
Posted by
kamlesh paulon
Dec 10, 2024| 5 min read
Last updated on : Dec 10, 2024
In this guide, we will walk through how to set up queue jobs in NextJS using BullMQ, a powerful and scalable Redis-based queue library. This approach is useful for handling background jobs like sending notifications or processing orders without blocking the main thread.
We previously covered how to set up Next.js cron jobs without Vercel using BullMQ, so this article builds upon that by showing how to leverage the same library for queue jobs. By using BullMQ, you can efficiently handle background processes without the need for additional packages or dependencies.
Table of contents
- Prerequisites
- Folder Structure
- Step 1: Redis Configuration
- Step 2: Setting Up the Queue
- Step 3: Queue Configurations
- Step 4: Defining Jobs
- Step 5: Triggering Jobs from the Frontend
- Conclusion
Prerequisites
Make sure you have the same prerequisites as mentioned in our previous article on cron jobs without Vercel:
- Redis installed and running locally or on a remote server.
- Next.js set up in your project.
- The BullMQ package installed.
Folder Structure
To keep things organized, we’ll structure our files as follows:
This structure helps in separating the Redis connection, job configurations, and the actual job processing logic.
Step 1: Redis Configuration
First, we’ll set up the Redis connection using the ioredis
package.
This connects your Next.js app to the Redis instance running locally at 127.0.0.1:6379
. You can update the Redis URL based on your environment.
Step 2: Setting Up the Queue
We will dynamically import all job files from the /jobs folder:
This ensures that all job processors are automatically loaded when the app starts.
Step 3: Queue Configurations
Here, we define the default job options, such as retry attempts and backoff strategies:
This setup retries failed jobs up to 3 times with an exponential backoff.
Step 4: Defining Jobs
Now, let’s define two job processors: one for processing orders
and one for sending user notifications
.
This worker processes order-related jobs. It listens for incoming jobs, processes them, and logs the result.
This worker handles sending notifications to users.
Step 5: Triggering Jobs from the Frontend
- We can create a simple UI to trigger these jobs. Here’s how you can do it:
Trigger Job UI
Backend Logic to Trigger Jobs
Using the Trigger in the Main page
- To test the functionality, simply include the
TriggerJob
component in your main layout or any page:
Conclusion
By following this guide, you can set up queue jobs in Next.js using BullMQ. This approach is flexible and can be expanded to handle various background tasks, from processing orders to sending notifications. Feel free to adjust the job configurations and queue logic to suit your specific needs.
For the full source code of this implementation, you can check out the following repository: Next.js Role and Permission with Queue Jobs.
For more advanced BullMQ features like job prioritization, rate limiting, or delayed jobs, check out the BullMQ documentation.
Get updates directly to your inbox.
Join 500+ developers getting updates on Laravel & Next.js tips. No spam,
unsubscribe anytime.