Build Your Own Blog with Next.js and Strapi - A Step-by-Step Guide!

Are you tired of searching for the perfect blog platform that suits your needs? Look no further! In this tutorial, I'll walk you through creating your own blog using Next.js and Strapi, a headless CMS, in just a few minutes.

Prerequisites

Before we dive into the tutorial, make sure you have the following installed on your computer:

1. Node.js (LTS version recommended): https://nodejs.org/en/download/
2. Yarn: https://yarnpkg.com/getting-started/install
3. Visual Studio Code (or any other code editor of your choice): https://code.visualstudio.com/download
4. Basic knowledge of JavaScript, React, and REST APIs

A headless CMS you said?

A headless Content Management System (CMS) like Strapi is a back-end only system that focuses on managing and storing content.

It provides a user-friendly interface for content creation, updating, and deletion without being tied to a specific front-end framework or presentation layer. This separation of concerns allows developers to build a custom front-end using their preferred technologies and consume the content via RESTful or GraphQL APIs.

Some of the key features of headless CMSs like Strapi are:

1. Flexibility: The decoupled architecture allows you to use any front-end framework or technology stack, making it highly adaptable to various project requirements.
2. Scalability: Headless CMSs are designed to handle a large volume of content and can be easily scaled to accommodate increased traffic or content volume.
3. API-driven: Content is exposed through APIs (RESTful or GraphQL), allowing seamless integration with various applications and services.
4. Customizability: Many headless CMSs offer extensible and customizable features, allowing developers to tailor the system to their specific needs.

Here are a few alternatives to Strapi that you can consider for your projects:

1. Contentful: A popular cloud-based headless CMS with a generous free tier, Contentful offers a user-friendly interface, powerful content modeling capabilities, and SDKs for various programming languages.
2. Sanity: A versatile and developer-focused headless CMS, Sanity provides real-time content collaboration, customizable content modeling, and a powerful query language called GROQ.
3. Ghost: Initially designed as a simple blogging platform, Ghost has evolved into a modern headless CMS. It offers a clean and easy-to-use interface, robust SEO features, and integration with various front-end frameworks.
4. Netlify CMS: A Git-based headless CMS, Netlify CMS is designed to work with static site generators like Jekyll, Hugo, and Gatsby. It offers a user-friendly interface, customizable content types, and seamless integration with the Netlify platform.
5. DatoCMS: A cloud-based headless CMS, DatoCMS offers a sleek user interface, advanced image handling capabilities, and native support for GraphQL queries.

These alternatives, along with Strapi, provide a range of options to suit different project requirements and preferences when it comes to building modern web applications with a headless CMS.

Well, now that we know what we're talking about. How can we integrate Strapi into Next.js?

Step 1: Setting up Strapi

First, we'll set up Strapi, to manage our blog data.

1. Install Strapi globally:

1yarn global add create-strapi-app

2. Create a new Strapi project:

1create-strapi-app my-blog-backend --quickstart

3. Once the installation is complete, your browser will open the Strapi admin panel. Create an admin user and complete the registration process.

4. In the Strapi dashboard, click on “Content Types Builder” in the sidebar, then click “Create new collection type”. Name it “Article” and click “Continue”.

5. Add the following fields to the “Article” collection type:

• “title” (Text)
• “content” (Rich Text)
• “image” (Media, single media)

6. Save the new collection type and restart the Strapi server.

7. Authorize the public use of your collection type in “Settings” — “Users & Permissions Plugin” — “Roles”. Unfold the “Article” tab and activate the “find” and “findOne” options.

Step 2: Adding sample data to Strapi

1. Click on “Content Manager” — “Articles” in the sidebar, then click “Create new entry”.
2. Create a few sample articles with a title, content, and image. Make sure to click “Save” and “Publish” after creating each article.

Step 3: Setting up Next.js

1. Open a new terminal and create a new Next.js project:

1yarn create next-app my-blog-frontend  
2cd my-blog-frontend

2. Install the required dependencies:

1yarn add axios strapi-sdk-js

Step 4: Fetching articles from Strapi

1. Create a new folder named “lib” in the project root and create a new file “strapi.js” inside it. Add the following code:

1import Strapi from "strapi-sdk-js"; // https://strapi-sdk-js.netlify.app/  
2  
3const strapi = new Strapi();  
4  
5export default strapi;

2. In the “pages” folder, open “index.js” and replace its content with:

1import strapi from "../lib/strapi";  
2  
3export async function getServerSideProps() {  
4  const articles = await strapi.find("articles");  
5  
6  return {  
7    props: {  
8      articles,  
9    },  
10  };  
11}  
12  
13export default function Home({ articles }) {  
14  if (!articles) return <div>Loading...</div>;  
15  return (  
16    <div>  
17      {articles.data.map((article) => (  
18        <div key={article.attributes.id}>  
19          <h2>{article.attributes.title}</h2>  
20          <p>{article.attributes.content}</p>  
21        </div>  
22      ))}  
23    </div>  
24  );  
25}

3. Start the development server:

1yarn dev

4. Open your browser and navigate to “http://localhost:3000". You should see your blog articles fetched from Strapi.

getServerSideProps

You may have noticed this function on our page. What is it for?

getServerSideProps is a Next.js function that allows you to fetch data on the server side before rendering a page. Using this function for fetching Strapi articles provides several advantages:

1. SEO (Search Engine Optimization): By fetching the articles on the server side, the content is available as soon as the page is loaded. This makes it easier for search engine crawlers to index your content, improving your blog's visibility on search engine results pages.
2. Performance: When you use getServerSideProps, the data is fetched and loaded before the page is rendered. This ensures that the user sees the content immediately when the page loads, improving the perceived performance of your blog. Additionally, because the data is loaded on the server, the browser doesn't need to make additional API calls, reducing the overall load time.
3. Dynamic data: getServerSideProps is executed every time a request is made to the page, ensuring that the most up-to-date data is fetched from Strapi. This is particularly useful when your blog's content is updated frequently, as it ensures that users always see the latest articles.
4. Flexibility: Fetching data on the server side allows you to integrate with various data sources more easily, including databases and APIs that may have restrictions on client-side access. This is especially relevant when working with headless CMSs like Strapi, which often require server-side communication for secure and efficient data handling.

In summary, using getServerSideProps for fetching Strapi articles ensures better SEO, performance, and flexibility while handling dynamic content, making it an ideal choice for building your blog with Next.js.

Go further with getStaticPaths and getStaticProps

To go further on this subject, it is also possible to use getStaticPaths along with getStaticProps instead of getServerSideProps.

The main interest in using these functions is that they enable Static Site Generation (SSG) for your blog, which comes with its own set of benefits:

1. Performance: With SSG, HTML pages are generated at build time, meaning that the content is already available when the user requests the page. This results in faster load times and improved performance.
2. Reduced server load: Since pages are generated during the build process, there's no need for server-side rendering at runtime. This reduces the load on your server and allows it to handle more requests.
3. Caching and CDN: Static pages can be easily cached and served through Content Delivery Networks (CDNs), further improving performance and reducing latency for users around the globe.
4. SEO: Just like with server-side rendering, static pages are easily crawlable by search engines, ensuring optimal SEO for your content.

However, there are some trade-offs to consider when using getStaticPaths and getStaticProps:

1. Build time: Generating static pages at build time can increase the build duration, especially when dealing with a large number of articles or frequently updating content.
2. Stale content: Since the content is generated at build time, any updates to your articles in Strapi would require a rebuild of your Next.js application for the changes to reflect on the front-end.

To use getStaticPaths and getStaticProps, you would need to create a dynamic route for your articles (e.g., /articles/[slug].js) and implement these functions to fetch the article data at build time. If you prefer SSG and can accommodate the trade-offs, using getStaticPaths and getStaticProps can be a great choice for improving the performance and user experience of your blog.

Congratulations! 🎉 You've successfully created your very own blog using Next.js and Strapi, combining the power of a modern front-end framework with the flexibility of a headless CMS.

As you continue to explore and expand your blog, remember that there are numerous ways to optimize and enhance it further. Additionally, you can explore various deployment options and integrate your blog with other services to create a truly unique and engaging user experience.

A Word of Caution

Before diving deeper into the world of Next.js, Strapi, and other modern web development technologies, it's important to note that these tools and frameworks evolve at a rapid pace. New features, improvements, and best practices are introduced regularly, which can significantly impact the way you build and maintain your projects.

The documentation links provided below are your go-to resources for the most accurate and up-to-date information on Strapi, Next.js, and their various features.

1. Strapi Documentation: The official Strapi documentation provides a comprehensive guide on using and customizing Strapi, including detailed explanations of its features, plugins, and API capabilities. Strapi Documentation
2. Next.js Documentation: Next.js's official documentation covers a wide range of topics, including project setup, routing, data fetching, and deployment. This resource will help you understand the ins and outs of Next.js and its various features. Next.js Documentation
3. getServerSideProps: This section of the Next.js documentation specifically discusses the _getServerSideProps_ function and its usage for server-side rendering and data fetching. getServerSideProps Documentation
4. Static Site Generation: The Next.js documentation also covers Static Site Generation (SSG), including the _getStaticProps_ and _getStaticPaths_ functions, and offers insights on when to use SSG instead of server-side rendering. Static Site Generation Documentation