Using Cursor to Create Sample Data for your NextJS App

Building a prototype without the hassle of a database

This is going to be a hands-on tutorial for getting sample data into a prototype application that you’re composing. We’ll demonstrate using a NextJS web application, but the same approach works for other application types, including desktop apps built using Electron or mobile apps built using Flutter.

Why would you want to do this? Because sometimes you just want to communicate an idea quickly without having to deal with the headache of a database. Colin Matthews says it well in a recent post about Cursor and other tools:

But what’s cooler is that you can use these tools to build functional prototypes from a Figma design, convert a rough hand-drawn sketch to a working app, translate a PRD document into an interactive prototype, or even build a usable internal tool for your team, with no coding ability

Getting Started

Install Cursor and get your laptop setup for composing a Node app.

Follow the instructions for creating a new NextJS app with ShadCN. Specifically:

npx shadcn@latest init -d

And then when prompted, create a new project, sample-cars:

✔ The path /Users/name/dev/specstoryai does not contain a package.json file. Would you like to start a new Next.js project? … yes
✔ What is your project named? … sample-cars

Add two simple components, button and card:

cd sample-cars
npx shadcn@latest add button card

And open your new project in Cursor:

cursor .

(If you haven’t already setup the cursor command on your machine, you can do so now inside Cursor by typing Ctrl/CMD-Shift-P to bring up the Palette and then running Shell Command: Install ‘cursor’ command).

Start the development server:

npm run dev 

You should see the Next.js sample app if you visit http://localhost:3000.

Composing your prototype

Now, you can prompt your way to a placeholder prototype, probably in one shot. Here’s what I did with Cursor composer in agent mode:

Change this application, replacing @page.tsx with a UI that displays the heading "Collectible Cars" and then a list of 10 ShadCN cards that say "Car 1", "Car 2", etc.

I made a specific mention of @page.tsx to get Cursor focused on the one file I wanted it to change. For the NextJS sample app, page.tsx contains almost everything that gets displayed, and by focusing Cursor on it we can avoid the creation of extra files, keeping the prototype simple and clean (from a project directory and file organization perspective).

I also explicitly referenced “ShadCN cards” because I like the styling of the UI components in that library. To keep Cursor focused, it helps to tell it which components you’d like on your page. Knowing ahead of time that I’d be using the card, I already installed it (above). If you ask Cursor to use a ShadCN component that’s not installed yet, it should walk you through installing it. Though in my experience, Cursor (with Claude 3.5 Sonnet) often suggests the wrong install command. If you get stuck on this, correct the AI by letting it know that the current ShadCN CLI component install command is npx shadcn@latest add. It’s even a good idea to add this to your .cursorrules file.

After letting the composer agent run and accepting the edits, my application looks like this (yours may differ):

Creating sample data

This is a great start, but as you can see the placeholder cards are all identical. This doesn’t really get the concept across. Let’s prompt for some sample data:

Add a new file that will hold JSON sample data for our application. Create an array of 10 cars using examples of classic cars from the 1950s and 1960s. For each car, store the make, model, engine type, years of manufacture, and a one sentence description.

I’m pretty intentional here about asking for a new file, mainly to keep my project and directories clean, and about asking for JSON data which is a widely used standard format for saving data. I gave Cursor some specifics to guide the creation of sample data, including the properties I wanted (make, model, etc). But you can also often get good, if sometimes surprising, results with open-ended requests, like Create an array of data for 10 classic cars. Finally, asking for an array in this prompt was intentional. We likely would’ve gotten the same results asking for a list of cars or just sample data for 10 cars. But in this case I knew specifically what I wanted for this tutorial. In general, it’s worth experimenting with the level of specificity of your requests. Being overly specific, especially on a topic you don’t yet know well, can steer the AI in the wrong direction and prevent it from making better recommendations.

Displaying the sample data

In this case, Cursor did a great job of generating a sample data file for us, but it didn’t make the leap to placing this sample data onto the page for us (in /app/page.tsx), so when we view the page we won’t see any change.

Reading Cursor’s response carefully, we see that it did at least ask if we’d like it to make the update to the main page to use this data. If your Cursor session also deferred making use of the sample data, you can use a prompt similar to this one to get it to finish the task:

Using this data, update the cards on our main page.

You might inevitably hit some hallucinations like we did with the Cadillac Eldorado, which was actually manufactured from 1952-2002. Fact check and manually correct the data file Cursor produced, until you’re satisfied.

Images - the SVG placeholder trick

Now some images would be nice. The fastest approach is to have Cursor generate a placeholder SVG for you and then display that on all the cards.

Generate a new SVG file in /public that is a placeholder image we can display for all the car cards. Use it on all the cards on the page.

For our type of application, a NextJS web app, any files in the /public folder will be available through the web server. For example, if you place image.png into the /public folder you’ll be able to access it at a URL like http://localhost:3000/image.png.

Not very stylish, but at least it gets across some of the spacing and layout for our prototype. To take this to the next level, we can get images for each of these classic cars and copy them into the /public folder.

Real images - the naming convention trick

I attempted to use ChatGPT with “Search the Web” enabled to "find an image for each one of these 10 classic cars”. But the results were mixed, and more often than not it hallucinated dead links. A more accurate approach is to use the Creative Commons Search Portal and paste in the name of each car in your sample data set. Download each image, rename it to something like make-model.jpg or make-model.png (e.g. chevrolet-corvette-c1.jpg) and copy it into the /public directory in the top of your sample-cars project. This will let Cursor connect the JSON data with the right images.

If you’ve named the files to match the make and model in your JSON data, it’s now easy to prompt Cursor to reference them:

The @public directory now has real images for some of the cars. Update the sample JSON data file to include links to images if available or to the placeholder SVG if not. Make these new images render on the cards on the page.

Making sample data interactive

Now let’s add the ability for the user to pick their favorite cars.

We want to let the user select their favorite cars and bring them to the top of the page. Add a ShadCN button to each card with an icon for "favorite".

This might work for you, but I hit the following error when Cursor tried to import the icon for the button.

Though the Cursor composer agent can automatically handle linter (coding-time) errors, it can’t handle build-time errors like this one without your help. Copy and paste the entire error into your Cursor prompt and it should be able to resolve it for you.

Build Error
Failed to compile 
Next.js (14.2.16) is outdated (learn more) 
./app/page.tsx
Error:
    × You're importing a component ...

¹

And now you can click a heart to mark one of the cars as your favorite and move it to the top of the page!

See the full Cursor history for this project and stay tuned for more data topics such as using HTML Web Storage (localStorage), and composing scripts to gather sample data.

1. CC Image attribution: RL GNZLZ, cosmic_spanner, Bernard Spragg, stephenhanafin, Michel Curi, kemeko1971