Building a CMS Website with Next.js and Strapi

In today's digital age, having an online presence is essential for businesses to thrive. A Content Management System (CMS) makes it easy for businesses to manage their online content. Next.Js and Strapi are two popular tools that can be used to build a CMS website. In this blog post, we will explore how to develop a CMS website using Next.Js and Strapi.

What is Next.Js?

Next.Js is a React-based framework that is used to build server-side rendered (SSR) React applications. It offers several benefits, such as improved performance, better SEO, and faster page loads. Additionally, Next.Js allows developers to build static sites, serverless applications, and hybrid applications.

What is Strapi?

Strapi is an open-source headless CMS that provides an intuitive interface for managing content. It offers a flexible data structure and can be easily customized to fit the needs of any website. Strapi provides APIs for developers to access the data, which can be used to create a front-end application using any framework or library.

Step 1: Installing Next.Js and Strapi

To get started, we need to install Next.Js and Strapi. We can install Next.Js using npm or yarn. Similarly, we can install Strapi using npm or yarn.

npm install next
npm install strapi
  

Step 2: Setting up the Strapi CMS

Once we have installed Strapi, we can set up the CMS by running the following command:

npx create-strapi-app my-project --quickstart
  

This command will create a new Strapi project in the my-project directory with a pre-built content model, including articles, categories, and users.

Upon the first time we run the Strapi server, we will be prompted to register an admin user. We can enter the required details such as email address and password, and this will create an admin user for us to manage the Strapi CMS.

Once the admin user has been registered, we can navigate to http://localhost:1337/admin in our web browser to access the Strapi dashboard and start creating content types and data for our CMS website.

In addition, we can also customize the Strapi server by modifying the settings in the config directory of our project. This includes settings for the database, server, plugins, and more.

Step 3: Creating a Next.Js application

To create a new Next.Js application, we can run the following command:

npx create-next-app my-app
  

This command will create a new Next.Js project in the my-app directory.

Step 4: Connecting Strapi to Next.Js

To connect Strapi to Next.Js, we need to create an API endpoint in Strapi and fetch the data from Next.Js.

To create an API endpoint in Strapi, we need to create a new content type. We can do this by navigating to the Strapi admin panel and clicking on the "Content Type Builder" option. We can then create a new content type and add fields to it.

Next, we need to create an API endpoint for the content type. We can do this by navigating to the "API" section of the Strapi admin panel and clicking on the "Content Types" option. We can then select the content type we just created and enable the "Public API" option.

To fetch the data from Next.Js, we can use the fetch API. We can make a GET request to the API endpoint we just created and fetch the data.

Step 5: Building the Front-end in Next.Js

To build the front-end in Next.Js, we can create a new page and fetch the data from the API endpoint we just created.

We can create a new page in the pages directory of our Next.Js project and add the following code:

import React from 'react';

const HomePage = ({ articles }) => {
return (
  <div>
  <h1>My Blog</h1>
  {articles.map((article) => (
    <div key={article.id}>
      <h2>{article.title}</h2>
      <p>{article.content}</p>
    </div>
  ))}
</div>
);
};

export async function getStaticProps() {
const res = await fetch('http://localhost:1337/articles');
const articles = await res.json();

return {
  props: {
    articles,
  },
};
}

export default HomePage;
  

In the above code, we create a new page called HomePage and pass in the articles as a prop. We then use the map function to iterate over the articles and render them on the page.

We also use the getStaticProps function to fetch the data from the API endpoint and pass it to the component as props.

Step 6: Running the Next.Js and Strapi Servers

To run the Next.Js and Strapi servers, we need to run the following commands:

cd my-project
npm run develop
  

cd my-app
npm run dev
  

The first command will start the Strapi server, and the second command will start the Next.Js server.

Step 7: Testing the CMS website

To test the CMS website, we can navigate to http://localhost:3000 in our web browser. We should see the list of articles fetched from the Strapi API displayed on the page.

Step 8: Customizing the CMS website

We can customize the CMS website by modifying the content model in Strapi and the front-end code in Next.Js. For example, we can add new fields to the content model or change the styling of the front-end.

Conclusion

In this blog post, we have learned how to develop a CMS website using Next.Js and Strapi. We started by installing Next.Js and Strapi, then created a new Strapi project and connected it to our Next.Js project. We then fetched the data from the Strapi API and rendered it on the front-end using Next.Js. Finally, we learned how to customize the CMS website by modifying the content model and front-end code.

At 3Brain Technolabs, we are passionate about helping our clients bring their ideas to life. If you're interested in building a similar project to the one described in this article, our team is here to assist you every step of the way. We have a wealth of experience working with Next.js and Strapi, and can provide guidance and support to help you create a modern and flexible CMS website tailored to your unique needs. Contact us today to learn more about our services and how we can help you achieve your goals.