Next.js is our favorite React based framework to use in production apps. Importing CSV and Excel files is a feature everyone has to build eventually. Whilst there are a handful of CSV parser libraries out there, you're left to build the UI yourself. We're going to show you how to add CSV file import with a delightful UI to your Next.js app in just a few minutes.
#What is UseCSV?
UseCSV is an all-in-one CSV import product that gives you a delightful CSV importer experience for your users. All you have to do is drop-in the UseCSV React component, and create a webhook endpoint to receive uploads.
Here's a sneak peak of what the import experience will be for your users (this opens in a modal inside your app):
Here are just a few of the awesome features of UseCSV:
- React lib which adds the UseCSV import button and modal to your app
- Supports CSV and all Excel formats (xlsx, xls, xlt), including legacy Excel versions
- Handles large import files
- Includes a library of common validation rules to choose from
Without further ado, let's get started!
#Setup your UseCSV account
You'll want to first grab a free UseCSV developer account. Once you've signed up and logged in, you'll see an Importer called "My First Importer" which has already been created for you.
Click the View button. Here you can configure your Importer. Note the Key and Webhook URL fields, we'll need these later on.
Head down to the Column section, where you can setup the data model for this Importer.
Click Add Column to create a new column, for example you could add a first_name column to begin with. Create as many columns as you like.
#Add CSV import to your Next.js app
Now your UseCSV Importer is setup, it's time to create a basic Next.js project and integrate UseCSV.
First create a basic Next.js project.
Then install the UseCSV React library.
Let's add the UseCSV React component to our app now. Edit
pages/index.js, import @usecsv/react and then add the UseCSV component into the page. You'll also need insert your actual importerKey, which can be found by going to the Importer in your UseCSV dashboard.
The user param us a JSON object that can be used to pass additional data which is included in the import. This is especially useful when you need to match up which user in your app an upload comes from. You can use any key-value pairs you like.
Launch the Next.js server with
npm run dev and visit http://localhost:3000. Your app will now have a fancy Import Data button.
#Receive data from imports
When a user imports data, UseCSV can send it to your app in two ways. The first is via a webhook. You set a Webhook URL in your Importer which UseCSV will make a POST request to, including the data in a JSON body. You can read more about the UseCSV webhook format in our docs.
Alternatively, if you want to keep uploaded data local or handle saving it in your frontend, you can pass an
onData callback function to the UseCSV component. You can read more about the UseCSV onData callback in our docs.
For this tutorial we are going to be using the webhook.
Add the webhook endpoint
We need to create a webhook API Route which UseCSV will call with the uploaded data. Create a new file
For the webhook request to reach localhost:3000 whilst we're developing, we need to setup a tunnel. You can use cloudflared to setup a free tunnel to localhost. Run
cloudflared tunnel --url http://127.0.0.1:3000 then copy the unique url it outputs. Add on the path of the new Next.js API Route we just created
/api/webhook and set the Webhook URL in your Importer in your UseCSV admin to this. E.g.
We're ready to try your first import!
Make sure your Next.js server is running with
npm run dev. Goto http://localhost:3000, click Import Data to open the Importer modal, upload a CSV file (you can download an auto generated sample .csv on the first step), match the columns and then click Import.
Watch your Next.js app console for the log of the webhook payload. UseCSV will automatically split up the webhooks into batches of 1,000 rows. The rows array will contain the imported data with the columns you setup in your Importer. The user object will contain any key-value pairs you passed to the corresponding user param in the UseCSV component.
And that's it! Be sure to checkout the UseCSV documentation for more details about all the great features available.