# Next.js Realtime CSV Importer

> Source: https://trigger.dev/docs/guides/example-projects/realtime-csv-importer

[​](https://trigger.dev/docs/guides/example-projects/realtime-csv-importer#overview)

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.

[​](https://trigger.dev/docs/guides/example-projects/realtime-csv-importer#github-repo)

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.

[​](https://trigger.dev/docs/guides/example-projects/realtime-csv-importer#video)

Video
------------------------------------------------------------------------------------------

[​](https://trigger.dev/docs/guides/example-projects/realtime-csv-importer#relevant-code)

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#parent-and-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.

[​](https://trigger.dev/docs/guides/example-projects/realtime-csv-importer#learn-more-about-trigger-dev-realtime)

Learn more about Trigger.dev Realtime
----------------------------------------------------------------------------------------------------------------------------------------------------------

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

*   [Trigger.dev Realtime](https://trigger.dev/docs/realtime)
     - learn more about how to subscribe to runs and get real-time updates
*   [Realtime streaming](https://trigger.dev/docs/realtime/react-hooks/streams)
     - learn more about streaming data from your tasks
*   [Batch Triggering](https://trigger.dev/docs/triggering#tasks-batchtrigger)
     - learn more about how to trigger tasks in batches
*   [React hooks](https://trigger.dev/docs/realtime/react-hooks)
     - learn more about using React hooks to interact with the Trigger.dev API

Was this page helpful?

YesNo

[Previous](https://trigger.dev/docs/guides/example-projects/product-image-generator)
[Realtime image gen with Fal.aiThis example Next.js project generates an image from a prompt using Fal.ai and shows the progress of the task on the frontend using Trigger.dev Realtime.\
\
Next](https://trigger.dev/docs/guides/example-projects/realtime-fal-ai)

⌘I

Assistant

Responses are generated using AI and may contain mistakes.