Next.js Realtime CSV Importer

​

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

​

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:

• Realtime docs - learn more about Realtime.
• Batch Trigger docs - learn more about Batch Triggers.
• React hooks - learn more about React hooks.