Next.js Realtime CSV Importer - Trigger

import RealtimeLearnMore from "/snippets/realtime-learn-more.mdx";

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

<Card title="View the Realtime CSV Importer repo" icon="GitHub" href="https://github.com/triggerdotdev/examples/blob/main/realtime-csv-importer/README.md"

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. </Card>

Video

<video controls className="w-full aspect-video" src="https://github.com/user-attachments/assets/25160343-6663-452c-8a27-819c3fd7b8df"

</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.