Next.js Realtime CSV Importer

This example Next.js project demonstrates how to use Trigger.dev Realtime to build a CSV Uploader with progress updates streamed to the frontend.

Overview

The frontend is a Next.js app that allows users to upload a CSV file, which is then processed in the background using Trigger.dev tasks. The progress of the task is streamed back to the frontend in real-time using Trigger.dev Realtime.

• A Next.js app with Trigger.dev for the background tasks.
• UploadThing to handle CSV file uploads
• Trigger.dev Realtime to stream updates to the frontend.

GitHub repo

View the Realtime CSV Importer repo

Click here to view the full code for this project in our examples repository on GitHub. You can fork it and use it as a starting point for your own project.

Video

Relevant code

• View the Trigger.dev task code in the src/trigger/csv.ts file.
• The parent task csvValidator downloads the CSV file, parses it, and then splits the rows into multiple batches. It then does a batch.triggerAndWait to distribute the work the handleCSVRow task.
• The handleCSVRow task “simulates” checking the row for a valid email address and then updates the progress of the parent task using metadata.parent. See the Trigger.dev docs for more information on how to use the metadata.parent object.
• The useRealtimeCSVValidator hook in the src/hooks/useRealtimeCSVValidator.ts file handles the call to useRealtimeRun to get the progress of the parent task.
• The CSVProcessor component in the src/components/CSVProcessor.tsx file handles the file upload and displays the progress bar, and uses the useRealtimeCSVValidator hook to get the progress updates.

Learn more about Trigger.dev Realtime

To learn more, take a look at the following resources:

• Trigger.dev Realtime - learn more about how to subscribe to runs and get real-time updates
• Realtime streaming - learn more about streaming data from your tasks
• Batch Triggering - learn more about how to trigger tasks in batches
• React hooks - learn more about using React hooks to interact with the Trigger.dev API