Get Started NextjsTutorial — 3. Adding data

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

• 1. Creating the project in Content Island
• 2. Defining the data model
• 3. Adding data
• 4. Creating the Nextjs project
• 5. Creating the folder structure
• 6. Connecting Content Island with Nextjs
• 7. Building the About page
• 8. Page with list of posts
• 9. Displaying a post
• 10. Deploying to Vercel

3. Adding data

Now that we have the structure, it's time to add data.

In Content Island, go to the Content tab and click on the "Add Content" button. Select the model, in this case, About.

Under "Content", fill in all the required fields—yes, all of them :)

• For picture, upload the image you want to display. In our case: About image.
• For fullname, add the name: John Doe.
• For shortBio, add a short description. We'll use placeholder text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et vehicula purus.

• In extendedBio, add Markdown content: About long text.

Finally, click the Publish button.

Now we have everything we need for our About page!

Now, let’s move on to the blog post content.

Go back to the content list and add a new entry. This time, select Post as the model.

In the General tab, change the content name to "Post 1".

Under Content, fill in the required fields:

• title: React Alicante 2024: Highlights & Takeaways
• date: 06/05/2025
• author: John Doe
• summary:

This past September, React Alicante 2024 once again proved why it is one of the most anticipated frontend conferences in Europe. Developers, engineers, and React enthusiasts from all over the world gathered in the beautiful coastal city of Alicante, Spain, for a weekend full of insightful talks, hands-on workshops, and invaluable networking opportunities.

• image: Post 1 Image
• content: Post 1 content.

Click Publish.

Let’s add another post. Go back to the content list.

Click on Add Content again and select the Post model.

In the General tab, rename the content to match the post title.

Under Content, fill in the required fields:

• title: Exploring Vest at React Alicante 2024
• date: 06/05/2025
• author: John Doe
• summary:

React Alicante 2024 featured an insightful session on **Vest**, a declarative validation framework designed for JavaScript applications. This talk provided attendees with a deep dive into how Vest simplifies form validation while maintaining flexibility and performance.

• image: Post 2 Image
• content: Post 2 content.

Additional Content for More Posts

• name: Post 3
• title: Post 3
• date: 06/05/2025
• author: John Doe
• summary:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et vehicula purus. Proin in risus ut metus eleifend porta. Aliquam dui lorem, volutpat sit amet enim iaculis, laoreet tristique lectus. Nullam eget sagittis est. Curabitur at dapibus eros. Vestibulum lacinia nisi vel ullamcorper sodales. Maecenas hendrerit rutrum leo a sagittis.

• image: Post 3 Image
• content: Post 3 content.

And there we have it—our About content, two full posts, and a couple of filler posts. We're now ready to build our website.