Looking for our logo ?

Build a blog with Next (React.js) and Strapi

Share on facebook
Share on linkedin
Share on twitter
Share by email

Maxime Castres

Introduction

Note: This tutorial was revised and updated on December 8 2020

One month ago, I published a tutorial on How to create a blog with Nuxt.js Strapi and Apollo. But I started to feel bad about React developers who may love to get a tutorial for them!

The thing is: I know Vue.Js more than React, and I wasn't sure if I would be able to offer the community a proper tutorial. But thanks to soupette, who helped me to understand how React works, this tutorial has been made possible!

If you are familiar with our blog you must have seen that we've released a series of tutorials on how to make blogs using Strapi with a lot of frontend frameworks: Gatsby, React, Vue, Nuxt.js or Angular.

But what if you would instead use another language? Let me tell you that I got that covered as today, we are going to learn how to do it with React!

Next blog

Starter

You may want to directly try the result of this tutorial. Well, we made a starter out of it so give it a try!

Goal

The goal here is to be able to create a blog website using Strapi as the backend and Next.js for the frontend. The source code is available on GitHub.

Prerequisites

This tutorial uses Strapi v3.3.4 You need to have node v.12 installed and that's all.

Setup

Create a blog-strapi folder and get inside!

mkdir blog-strapi && cd blog-strapi

Strapi setup

That's the easiest part of this tutorial thanks to Rémi who developed a series of Strapi templates that you can use for your Blog, E-commerce, Portfolio or Corporate website project.

These templates are Strapi applications containing existing collection-types and single-types suited for the appropriate use case, and data. In this tutorial we'll use the Blog template and connect a Next.js application to it.

Note: for this tutorial, we will use yarn as your package manager.

Create your Strapi backend folder using the Blog template.

yarn create strapi-app backend --quickstart --template https://github.com/strapi/strapi-template-blog

Admin

Don't forget that Strapi is running on http://localhost:1337. Create your admin user by signing up!

That's it! You're done with Strapi! I'm not kidding, we can start to create our Next.js application now in order to fetch our content from Strapi. Ok ok wait, let's talk about this amazing template you just created.

You should know that before the starters and before the templates we only had tutorials. The idea of creating starters came to us when we realized that we could do something with the end result of our tutorials. Thus were born our starters. However Strapi evolves quickly, very quickly and at the time the starters constituted a repository including the backend as well as the frontend. This means that updating the Strapi version on all our starters took time, too much time. We then decided to develop templates that are always created with the latest versions of Strapi. Quite simply by passing in parameter the repository of the desired template like you just did. Also, it gives you a good architecture for your Strapi project.

These templates provide a solid basis for your Strapi application.

3 Collection types are already created. Article, Category, Writer.
2 Single types are already created. Global, Homepage.
Find and FindOne permissions are open for all of you collection types and single types.
Existing data.

Admin Home

Global

Articles

Permissions

Feel free to modify all this however, we will be satisfied with that for the tutorial.

Nice! Now that Strapi is ready, you are going to create your Gatsby application.

Front-end setup

Well, the easiest part has been completed, let's get our hands dirty developing our blog!

1. Next setup

Create a Next frontend app by running the following command:

npx create-next-app frontend

Once the installation is completed, we can add two packages that we'll use later: moment, react-moment and react-markdown. This package will allow us to display the date of publication in a nice format and the content of article in Markdown.

Run the following command in the frontend folder:

yarn add moment react-moment react-markdown

Great! We are all ready now.

2. Fetch data from Strapi

First we are going to create a function to fetch data from our Strapi API.

Create a ./frontend/lib/api.js file containing the following code:

export function getStrapiURL(path = "") {
  return `${
    process.env.NEXT_PUBLIC_STRAPI_API_URL || "http://localhost:1337"
  }${path}`;
}

// Helper to make GET requests to Strapi
export async function fetchAPI(path) {
  const requestUrl = getStrapiURL(path);
  const response = await fetch(requestUrl);
  const data = await response.json();
  return data;
}

By default, this function will look at a STRAPI_API_URL env variable in your .env file. I fyou don't have one, it will use the default url of Strapi on your machine.

The fetchAPI function will first get the request url thanks to the getStrapiURL function above. Then it will simply call the fetch function on this requestUrl and return the data in json format.

We'll also create another function outside of this file in order to fetch Strapi media.

Create a ./frontend/lib/media.js file containing the following:

import { getStrapiURL } from "./api";

export function getStrapiMedia(media) {
  const imageUrl = media.url.startsWith("/")
    ? getStrapiURL(media.url)
    : media.url;
  return imageUrl;
}

This function will simply return the correct url for an image depending on where they are hosted (local machine, hosted on a server). In fact, locally, an image will have the /uploads/... url but on Cloudinary it will have a the https://cloudinary.com/.... url

We should be good concerning this!

3. A little bit of css

We don't want you to bother with some styling in this tutorial so we created a css file that is being used for every blog tutorial. Whether your do the Next.js, Gatsby or Nuxt.js tutorial, you will have the sane result

Create a ./frontend/assets/css/style.css file containing the following:

a {
  text-decoration: none;
}

h1 {
  font-family: Staatliches;
  font-size: 120px;
}

#category {
  font-family: Staatliches;
  font-weight: 500;
}

#title {
  letter-spacing: 0.4px;
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.13636;
}

#banner {
  margin: 20px;
  height: 800px;
}

#editor {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.75;
}

.uk-navbar-container {
  background: #fff !important;
  font-family: Staatliches;
}

img:hover {
  opacity: 1;
  transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
}

4. _app.js

Let's create some pages now! First we'll need to override the default ./frontend/pages/_app.js in order to add Uikit, the Staatliches font but more importantly, we will fetch our Global site settings which is basically our Global single type in Strapi.

Replace the content of the ./frontend/pages/_app.js with the following:

import App from "next/app";
import Head from "next/head";
import "../assets/css/style.css";
import { createContext } from "react";
import { getStrapiMedia } from "../lib/media";
import { fetchAPI } from "../lib/api";

// Store Strapi Global object in context
export const GlobalContext = createContext({});

const MyApp = ({ Component, pageProps }) => {
  const { global } = pageProps;

  return (
    <>
      <Head>
        <link rel="shortcut icon" href={getStrapiMedia(global.favicon)} />
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Staatliches"
        />
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/uikit@3.2.3/dist/css/uikit.min.css"
        />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.min.js" />
        <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.3/dist/js/uikit-icons.min.js" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.js" />
      </Head>
      <GlobalContext.Provider value={global}>
        <Component {...pageProps} />
      </GlobalContext.Provider>
    </>
  );
};

// getInitialProps disables automatic static optimization for pages that don't
// have getStaticProps. So article, category and home pages still get SSG.
// Hopefully we can replace this with getStaticProps once this issue is fixed:
// https://github.com/vercel/next.js/discussions/10949
MyApp.getInitialProps = async (ctx) => {
  // Calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(ctx);
  // Fetch global site settings from Strapi
  const global = await fetchAPI("/global");
  // Pass the data to our page via props
  return { ...appProps, pageProps: { global } };
};

export default MyApp;

You can see here that we are using the fetchAPI function that we created earlier in order to fetch our Global single type in Strapi. Then we store it in a context.

5. Components! Lot of them!

Before going further with our pages we need to create some components that will be used by them.

Navbar component
Layout component
Seo component
Articles component
Image component
Card component

Create a ./frontend/components/nav.js component containing the following:

import React from "react";
import Link from "next/link";

const Nav = ({ categories }) => {
  return (
    <div>
      <nav className="uk-navbar-container" data-uk-navbar>
        <div className="uk-navbar-left">
          <ul className="uk-navbar-nav">
            <li>
              <Link href="/">
                <a>Strapi Blog</a>
              </Link>
            </li>
          </ul>
        </div>
        <div className="uk-navbar-right">
          <ul className="uk-navbar-nav">
            {categories.map((category) => {
              return (
                <li key={category.id}>
                  <Link as={`/category/${category.slug}`} href="/category/[id]">
                    <a className="uk-link-reset">{category.name}</a>
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      </nav>
    </div>
  );
};

export default Nav;

You can see here that this component receive some categories as a prop. Don't forget that when we'll declare it.

Create a ./frontend/components/layout.js component containing the following:

import Nav from "./nav";

const Layout = ({ children, categories, seo }) => (
  <>
    <Nav categories={categories} />
    {children}
  </>
);

export default Layout;

This component will call the nav component.

Create a ./frontend/components/seo.js component containing the following:

import Head from "next/head";
import { useContext } from "react";
import { GlobalContext } from "../pages/_app";
import { getStrapiMedia } from "../lib/media";

const Seo = ({ seo }) => {
  const { defaultSeo, siteName } = useContext(GlobalContext);
  const seoWithDefaults = {
    ...defaultSeo,
    ...seo,
  };
  const fullSeo = {
    ...seoWithDefaults,
    // Add title suffix
    metaTitle: `${seoWithDefaults.metaTitle} | ${siteName}`,
    // Get full image URL
    shareImage: getStrapiMedia(seoWithDefaults.shareImage),
  };

  return (
    <Head>
      {fullSeo.metaTitle && (
        <>
          <title>{fullSeo.metaTitle}</title>
          <meta property="og:title" content={fullSeo.metaTitle} />
          <meta name="twitter:title" content={fullSeo.metaTitle} />
        </>
      )}
      {fullSeo.metaDescription && (
        <>
          <meta name="description" content={fullSeo.metaDescription} />
          <meta property="og:description" content={fullSeo.metaDescription} />
          <meta name="twitter:description" content={fullSeo.metaDescription} />
        </>
      )}
      {fullSeo.shareImage && (
        <>
          <meta property="og:image" content={fullSeo.shareImage} />
          <meta name="twitter:image" content={fullSeo.shareImage} />
          <meta name="image" content={fullSeo.shareImage} />
        </>
      )}
      {fullSeo.article && <meta property="og:type" content="article" />}
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  );
};

export default Seo;

This component will create the necessary meta tags for the SEO of your blog. It is using the GlobalContext created in the ./frontends/pages/_app.js file and the getStrapiMedia function we also created earlier to correctly fetch the default image for your SEO.

Create a ./frontend/components/image.js component containing the following:

import { getStrapiMedia } from "../lib/media";

const Image = ({ image, style }) => {
  const imageUrl = getStrapiMedia(image);

  return (
    <img
      src={imageUrl}
      alt={image.alternativeText || image.name}
      style={style}
    />
  );
};

export default Image;

Useful component for displaying images.

Stick with me, only 2 components left to create!

Create a ./frontend/components/articles.js component containing the following:

import React from "react";
import Card from "./card";

const Articles = ({ articles }) => {
  const leftArticlesCount = Math.ceil(articles.length / 5);
  const leftArticles = articles.slice(0, leftArticlesCount);
  const rightArticles = articles.slice(leftArticlesCount, articles.length);

  return (
    <div>
      <div className="uk-child-width-1-2@s" data-uk-grid="true">
        <div>
          {leftArticles.map((article, i) => {
            return (
              <Card article={article} key={`article__left__${article.slug}`} />
            );
          })}
        </div>
        <div>
          <div className="uk-child-width-1-2@m uk-grid-match" data-uk-grid>
            {rightArticles.map((article, i) => {
              return (
                <Card
                  article={article}
                  key={`article__left__${article.slug}`}
                />
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Articles;

This component will simply split articles (just some styling purpose) on the right and left side of your blog. As you can see it is calling a component which will be our last one to create!

Create a ./frontend/components/card.js component containing the following:

import React from "react";
import Link from "next/link";
import Image from "./image";

const Card = ({ article }) => {
  return (
    <Link as={`/article/${article.slug}`} href="/article/[id]">
      <a className="uk-link-reset">
        <div className="uk-card uk-card-muted">
          <div className="uk-card-media-top">
            <Image image={article.image} />
          </div>
          <div className="uk-card-body">
            <p id="category" className="uk-text-uppercase">
              {article.category.name}
            </p>
            <p id="title" className="uk-text-large">
              {article.title}
            </p>
          </div>
        </div>
      </a>
    </Link>
  );
};

export default Card;

Just a simple component that will be used for displaying the article on the main page. It is using the Image component we just created earlier! Annnd we're done for the components!

Let's create our pages now!

6. Pages

First thing to do is to override the default ./frontend/pages/index.js.

Replace the content of the index page with the following:

import React from "react";
import Articles from "../components/articles";
import Layout from "../components/layout";
import Seo from "../components/seo";
import { fetchAPI } from "../lib/api";

const Home = ({ articles, categories, homepage }) => {
  return (
    <Layout categories={categories}>
      <Seo seo={homepage.seo} />
      <div className="uk-section">
        <div className="uk-container uk-container-large">
          <h1>{homepage.hero.title}</h1>
          <Articles articles={articles} />
        </div>
      </div>
    </Layout>
  );
};

export async function getStaticProps() {
  // Run API calls in parallel
  const [articles, categories, homepage] = await Promise.all([
    fetchAPI("/articles?status=published"),
    fetchAPI("/categories"),
    fetchAPI("/homepage"),
  ]);

  return {
    props: { articles, categories, homepage },
    revalidate: 1,
  };
}

export default Home;

As you can see here. We are simply fetching our homepage single types but also our categories and articles. Then we display all of that using the components we just created earlier.

Enough suspens! Now you can launch your Next.js app if you didn't start it yet or simply reload it.

Next.js blog

Article page

Now we'll simply create a page for each one of our article!

Create a ./frontend/pages/article/[slug].js file containing the following:

import ReactMarkdown from "react-markdown";
import Moment from "react-moment";
import { fetchAPI } from "../../lib/api";
import Layout from "../../components/layout";
import Image from "../../components/image";
import Seo from "../../components/seo";
import { getStrapiMedia } from "../../lib/media";

const Article = ({ article, categories }) => {
  const imageUrl = getStrapiMedia(article.image);

  const seo = {
    metaTitle: article.title,
    metaDescription: article.description,
    shareImage: article.image,
    article: true,
  };

  return (
    <Layout categories={categories}>
      <Seo seo={seo} />
      <div
        id="banner"
        className="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light uk-padding uk-margin"
        data-src={imageUrl}
        data-srcset={imageUrl}
        data-uk-img
      >
        <h1>{article.title}</h1>
      </div>
      <div className="uk-section">
        <div className="uk-container uk-container-small">
          <ReactMarkdown source={article.content} escapeHtml={false} />
          <hr className="uk-divider-small" />
          <div className="uk-grid-small uk-flex-left" data-uk-grid="true">
            <div>
              {article.author.picture && (
                <Image
                  image={article.author.picture}
                  style={{
                    position: "static",
                    borderRadius: "50%",
                    height: 30,
                  }}
                />
              )}
            </div>
            <div className="uk-width-expand">
              <p className="uk-margin-remove-bottom">
                By {article.author.name}
              </p>
              <p className="uk-text-meta uk-margin-remove-top">
                <Moment format="MMM Do YYYY">{article.published_at}</Moment>
              </p>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export async function getStaticPaths() {
  const articles = await fetchAPI("/articles");

  return {
    paths: articles.map((article) => ({
      params: {
        slug: article.slug,
      },
    })),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const articles = await fetchAPI(
    `/articles?slug=${params.slug}&status=published`
  );
  const categories = await fetchAPI("/categories");

  return {
    props: { article: articles[0], categories },
    revalidate: 1,
  };
}

export default Article;

Oh! There is a lot right here! First of all we are defining the image and the seo of this article:

const imageUrl = getStrapiMedia(article.image);

const seo = {
  metaTitle: article.title,
  metaDescription: article.description,
  shareImage: article.image,
  article: true,
};

As this page has dynamic route, we are defining the path of this article which will be its slug. More information about getStaticPaths.

export async function getStaticPaths() {
  const articles = await fetchAPI("/articles");

  return {
    paths: articles.map((article) => ({
      params: {
        slug: article.slug,
      },
    })),
    fallback: false,
  };
}

Then we define the props using getStaticProps. We fetch the data for this article and all the categories.

export async function getStaticProps({ params }) {
  const articles = await fetchAPI(
    `/articles?slug=${params.slug}&status=published`
  );
  const categories = await fetchAPI("/categories");

  return {
    props: { article: articles[0], categories },
    revalidate: 1,
  };
}

Now if you reload you Next.js application and if you click on any article it should be working good!

Article page

Category page

We need to do the exact same process as for the article page.

Create a ./frontend/pages/category/[slug].js file containing the following:

import Articles from "../../components/articles";
import { fetchAPI } from "../../lib/api";
import Layout from "../../components/layout";
import Seo from "../../components/seo";

const Category = ({ category, categories }) => {
  const seo = {
    metaTitle: category.name,
    metaDescription: `All ${category.name} articles`,
  };

  return (
    <Layout categories={categories}>
      <Seo seo={seo} />
      <div className="uk-section">
        <div className="uk-container uk-container-large">
          <h1>{category.name}</h1>
          <Articles articles={category.articles} />
        </div>
      </div>
    </Layout>
  );
};

export async function getStaticPaths() {
  const categories = await fetchAPI("/categories");

  return {
    paths: categories.map((category) => ({
      params: {
        slug: category.slug,
      },
    })),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const category = (await fetchAPI(`/categories?slug=${params.slug}`))[0];
  const categories = await fetchAPI("/categories");

  return {
    props: { category, categories },
    revalidate: 1,
  };
}

export default Category;

Very similar to the article page. This will allow you to consult the page of a specifi category. Try it!

Category List

Conclusion

Huge congrats, you successfully achieved this tutorial. I hope you enjoyed it!

Congratulations

Still hungry?

Write for the community

Contribute and collaborate on educational content for the Strapi Community https://strapi.io/write-for-the-community

Can't wait to see your contribution!

One last thing, we are trying to make the best possible tutorials for you, help us in this mission by answering this short survey https://strapisolutions.typeform.com/to/bwXvhA?channel=xxxxx

Share on facebook
Share on linkedin
Share on twitter
Share by email