> ## Documentation Index
> Fetch the complete documentation index at: https://trigger.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://nextjs.org/) app with [Trigger.dev](https://trigger.dev/) for the background tasks.
* [UploadThing](https://uploadthing.com/) to handle CSV file uploads
* Trigger.dev [Realtime](https://trigger.dev/launchweek/0/realtime) to stream updates to the frontend.

## GitHub repo

> [card] [View the Realtime CSV Importer repo](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.

## Video

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

## Relevant code

* View the Trigger.dev task code in the [src/trigger/csv.ts](https://github.com/triggerdotdev/examples/blob/main/realtime-csv-importer/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](https://trigger.dev/docs/runs/metadata.md#parent-&-root-updates) for more information on how to use the `metadata.parent` object.
* The `useRealtimeCSVValidator` hook in the [src/hooks/useRealtimeCSVValidator.ts](https://github.com/triggerdotdev/examples/blob/main/realtime-csv-importer/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](https://github.com/triggerdotdev/examples/blob/main/realtime-csv-importer/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](https://trigger.dev/docs/realtime.md) - learn more about how to subscribe to runs and get real-time updates
* [Realtime streaming](https://trigger.dev/docs/realtime/react-hooks/streams.md) - learn more about streaming data from your tasks
* [Batch Triggering](https://trigger.dev/docs/triggering.md#tasks-batchtrigger) - learn more about how to trigger tasks in batches
* [React hooks](https://trigger.dev/docs/realtime/react-hooks.md) - learn more about using React hooks to interact with the Trigger.dev API


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.