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

Our community is looking for talented writers who are passionate about our ecosystem (jamstack, open-source, javascript) and willing to share their knowledge/experiences through our Write for the community program.

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 for React developers who might have wanted a tutorial just 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 was 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 wanted to use another language? I’m happy to tell you that as of today, we got you covered, you can now learn how to do it using React!

Next.js is an open-source React front-end development web framework that enables you to leverage such features as server-side rendering or generating static websites for React-based web applications.

Starters

You may want to directly try the result of this tutorial. Well, we made a starter out of it so give it a try! You may want to see what the final result of this tutorial looks like live. Well, we made a starter out of it, so feel free to try it out!

Goal

The goal here is to be able to create a blog website using Strapi for 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 go inside it

mkdir blog-strapi && cd blog-strapi

Strapi setup

This is the easiest part of this tutorial and it’s all 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 that contain pre-built collection-types and single-types suited for the appropriate use case and data type. In this tutorial, you'll use the Blog template and connect a Next.js application to it.

Note: for this tutorial, you will need to 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

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 we had starters and 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 our starters were born. However, Strapi evolves quickly, very quickly. At the time, starters were made up of a repository that included the backend as well as the frontend. This meant that updating the Strapi version on all our starters took time, too much time. Therefore we decided to develop templates that are always created with the latest versions of Strapi. This was achieved quite simply by passing the parameter of the repository to the desired template like you just did. This method also gives a recommended architecture for your Strapi project.

These templates provide a solid basis for your Strapi application and include the following:

• 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 your collection-types and single-types.
• Mock data.

Feel free to modify any of this if you want. However, for the purposes of this tutorial, this initial setup should be sufficient.

Nice! Now that Strapi is ready, you are going to create your Next.js 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 finished, add the following packages which you’ll need later: moment, react-moment, and react-markdown. These packages allow you to display the publication date in a nice format and the content of articles in Markdown.

• Run the following command in the frontend folder:

yarn add moment react-moment react-markdown

Great! You’re all ready now

2. Fetch data from Strapi

First, you need to create a function to fetch data from your 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. If you don't have one, it will use the default url of Strapi on your machine.

The fetchAPI function first gets the request URL thanks to the getStrapiURL function above. Then it calls the fetch function on this requestUrl and returns the data in a JSON format.

You also need to 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 returns the correct URL of an image depending on where it is hosted (either on your local machine or on hosted on a server). Locally, an image has a URL structure like so: /uploads/… Whereas on Cloudinary it has a URL structure like this: https://cloudinary.com/....

Your application can now fetch content from your Strapi API and fetch Strapi media.

3. A little bit of css

We don't want to bother you too much with styling in this tutorial, so we created a CSS file that is used throughout all our blog tutorials. Whether you do the Next.js, Gatsby, or Nuxt.js tutorial, you will always have the same frontend 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, you need to override the default ./frontend/pages/_app.js in order to add Uikit, the Staatliches font, but more importantly, you need to fetch the Global site settings which are basically the Global single-type in Strapi.

• Replace the contents of the ./frontend/pages/_app.js file 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 the fetchAPI function created earlier is used in order to fetch the Global single-type in Strapi. Then it gets stored in a context.

5. Components! Lot of them!

Before going any further with the pages, you first need to create some components that will be necessary to build them out. For this tutorial, you need the following components:

• Navbar component
• Layout component
• Seo component
• Articles component
• Image component

• Card component

• Create a ./frontend/component folder.

• 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 receives some categories as a prop. Don't forget that when you 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 calls 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 creates the necessary meta tags for the SEO of your blog. It uses the GlobalContext created in the ./frontends/pages/_app.js file and the getStrapiMedia function created earlier to fetch the correct 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 splits your list of articles (for styling purposes) on the right and left-hand sides of your blog. As you can see, it calls a component that I promise will be the last one you need 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!

You’re now ready to create your pages!

6. Pages

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

• Replace the contents 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, the application fetches the Homepage single-type as well as the Category and Article collection-types. It then displays all of that using the components you just created.

Alright, enough suspense! You can now launch your Next.js app if you haven’t already or simply reload it using the following command:

yarn dev

Article page

Now, you need to create a page for each one of your articles.

• Create a ./frontend/pages/article folder.
• 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;

So there’s a lot of information to unpack here. Let’s break it down into separate sections to make it easier to understand. First of all, it declares the image and SEO of the article.

const imageUrl = getStrapiMedia(article.image);

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

Since this page has a dynamic route, the article’s path needs to be defined using its slug. You can find more information about pre-rendering all the paths specified by getStaticPaths. here.

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

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

Then you need to define the props using getStaticProps. You need to fetch the date of the article and 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 your Next.js application and if you click on any article it should be working properly!

Category page

You now need to go through the exact same process as you did for the article page.

• Create a ./frontend/pages/category folder.
• 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;

As you can see, it’s very similar to the article page. This allows you to filter your list of articles on a specific category. Try it out for yourself!

Conclusion

Huge congrats, you successfully completed this tutorial, you can be proud of yourself. I hope you enjoyed it!

Hungry for more?

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

Please note: Since we initially published this blog, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case, and please help us by reporting it here.

Get started with Strapi by creating a project using a starter or trying our live demo. Also, join our academy to become a Strapi expert, and consult our forum if you have any questions. We will be there to help you.