Get Started Nextjs Tutorial

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

1. Creating the project in Content Island

Headless CMS

Setting up a blog is the perfect example to understand how Next.js and Content Island work. It's a simple project but rich enough to play with routes, dynamic content, and a bit of interactivity.

Plus, having your own blog is never a bad idea—especially if you want something lightweight, free of third-party ads, and fully customizable.

We’re going to implement a basic starter:

• 📜 A page listing all posts.

• ✍️ A page to view each post in detail.

• 👤 An "About Us" page—because it's always good to introduce yourself.

The final result would look like this:

One option for building this would be to use plain HTML/CSS, but of course, we want this to be dynamic. I don't want to mess with the HTML every time I want to update my bio, fix a typo, or add a new post. In fact, I’d like it if someone who doesn’t know how to code could add posts or edit data when needed. But I also want the best of both worlds: the speed and simplicity of static HTML/CSS and the flexibility to update data easily.

What can I do? Define a model of my application in Content Island, input the data, and using a technology like Next.js, generate a static site that updates every time the information in my Content Island project changes.

Creating the Project in Content Island

Let’s start creating the project from scratch.

Once you've created your account on Content Island and logged in, depending on your role:

• You might see a window where you can choose between the projects you have access to or manage users. In this case, choose to go to the project list.

• Or you’ll directly see the list of projects (if it’s your first time, it’ll be empty).

Click on "Add Project."

A "General" tab appears where you need to name your project. Type: "my-blog" and click the save button.

Now it asks us to generate an API token (this is what we’ll use to fetch data from our project in Next.js). Click "Generate Token."

It also asks us to select the languages our project will support. In this case, we choose English (Content Island supports multiple languages).

Now three tabs are enabled:

• The model tab, where we’ll define our project’s entities.

• The content tab, where we’ll enter the data for our project.

• The webhooks tab, where we can define actions triggered by events in our project.

In the next step, we’ll define the entities for our blog project.