Easy Yet Powerful Static Blog Website with Next.js and Strapi

Created with Figma

Static websites are awesome! But, what is a static website actually? Technically, it is a simple list of HTML files, which displays the same information to every visitor. Unlike dynamic websites, they do not require any backend programming or database. Publishing a static website is easy, the files are uploaded on a simple web server or storage provider. The two main advantages of static websites are security and speed since we need no database (yet still able to talk to an API via ajax requests), so it can not be hacked and there is no need to render a page for each request, which makes web browsing faster.

There are numerous open-source static website generators available to make the development easier, which are Next.js, Gatsby, Hugo, Jekyll, etc. By default, the content is managed through static (ideally Markdown) files but for more customization we also can use Content API. Then, the generator requests the content, injects it in templates defined by the developer and generates a bunch of HTML files.

In this article, we will create a static blog using Next.js. Static website needs a source of content: in this example we will deliver it using an API created with Strapi.

Why Next.js?

Next.js is one of the best frameworks for building static websites, thanks to built-in server side rendering that achieves a great SEO (Search Engine Optimization) performance.

Traditional React SPAs (Single Page Application) is just a single HTML file produced. This means that the pages on the website do not exist before being rendered by the client. In other words, any web crawler cannot discover them easily because they technically do not exist. This is a huge problem in terms of SEO.

As opposed to what happens with client-side rendered applications, server-side rendered applications have one file per page. This means that each page exists before being rendered by the browser client-side. In other words, any web crawler can index them all effortlessly and treat them differently based on their content. So, Next.js is inherently an excellent tool to achieve great SEO performance.

Built on top of React makes Next.js easier to help developers with creating blazing fast static websites and well performed web applications.

Why Strapi?

With more than 47,000 stars on Github, Strapi is definitely the most famous Headless CMS.

Built on top of Node.js, Strapi saves developers weeks of development time and allows easy long-term content management through a beautiful administration panel anyone can use.

Thanks to its extensible plugin system, it provides a large set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc.

Strapi is 100% open source, which means:

• Strapi is completely free
• Strapi has an official forum
• We can host in our server, meaning we own the data

Setting up the project

In this project you can simply use the Next.js starter template. Feel free to create your own template, the idea is to have nice components for blog posts and blog post detail pages.

First we have to install the CLI tool create-next-app. Then let’s initialize our project using the starter template and the create-next-app with

$ yarn create next-app — example cms-strapi <project-name>

Then we will have to cd into your project and run yarn install. Using yarn dev we can already start a development server and open your project in the browser.

Next.js Starter Template

Managing the content

The next question might be “How can I manage contents?”. Most static site generators require you to edit your contents on a flat file basis. That means we have a content directory inside your project source which uses markdown. We want to focus on the content instead of worrying about wrong syntax while writing a simple article using markdown. The solution is a headless CMS.

What is a Headless CMS?

A headless CMS is simply a decoupled system. That means we can query contents via an API like REST or GraphQL. Headless CMS allows us to manage content in one place and still be able to deploy that content across any frontend framework we choose and still access the same content. We can also serve the same data from a website and a smartphone app at the same time.

Here comes Strapi! The most popular headless CMS on the internet and also we are using it on our blog on Gravel.

Preparing our contents on Strapi

Let’s create a Strapi API and figure out the collection types along with the data. We will use Strapi v4, which requires node v.14 installed, and we will use yarn as the package manager.

Install Strapi

yarn create strapi-app my-project
cd my-project
yarn develop

Strapi is now running at http://localhost:1337 and creates our user admin by signing up!

Strapi Register Page

After creating an user admin, we are now ready to explore what is inside Strapi and start the magic from here.

Strapi Dashboard

The Content-type Builder plugin helps us create our data structure.

Content-Type Builder for Endpoint Creation

Collection-type above is used to create articles, and we will use it as an endpoint for our blog website. We’ll talk about it later.

Adding Content

Now we can start creating articles using collection-types that we’ve generated earlier.

Endpoint Authentication Setup

Set Token to Access All Endpoint

We are also able to set the endpoint as an authenticated endpoint and then create a token to access it.

Strapi is a decoupled CMS meaning the backend and frontend management of a website into two different systems: one for content creation and storage, and another system, one or more, are responsible for consuming that data and presenting it to the user through some interface. This is why we also need to have a setup for the upload provider.

Upload images to Google Cloud Storage

An upload provider is used to store our data and retrieve it as often as we like, and image is one of them. Image also plays a huge part in our content, especially in SEO, to improve the quality and quantity of website traffic from search engines. Using images also helps our website visitors understand the article we write or bring our product and brand to life. Strapi allows us to use images anywhere we want, but unfortunately, third-party platforms have documentation limitations; one of them is GCP Storage, which will help us store images and other data.

But no need to be sad since Strapi is node.js based we can use this npm package, strapi-provider-upload-google-cloud-storage.

Install

yarn add @strapi-community/strapi-provider-upload-google-cloud-storage

Then, we need to create a bucket in the GCP console where we store our data. After that, there are a couple of things we need to set up in our Strapi.

Edit .config/plugins.js

We need to set up strapi::security middlewares to avoid CSP (Content Security Content) blocked url and also added a layer of security that helps us to detect and mitigate data injection attacks.

Edit ./config/middlewares.js

And the last thing we need to do is set the bucket to the public.

The CMS is ready, now we are back to the static website, to consume the API and serve the data.

Getting the content into your static files

Next question: How to receive the content from Strapi and use it in our Next.js application?

First, you need to create a template for the blog posts like the example below that we have on Gravel website.

Blog Post Page at Gravel

This is the template for the list of blog posts page. Now we’re going to fetch the data.

We use the token we’ve created above as the authentication to fetch the data.

Next, we need to create a page to display each article and fetch each article’s data.

Blog Detail Page at Gravel

Awesome! We’re finished with our static blog website using Next, and we can host it in Vercel or Netlify, and for the Strapi, we host it on a cloud platform. For personal use, I suggest using Heroku as published by the Strapi team in an article on how to deploy Strapi application using heroku.

Conclusion

Congratulations! You have successfully finished the guideline on how to make a blog using Next.js and Strapi.

Strapi is not only used to make a blog, but you can also use it as a regular API for e-commerce, booking systems and adapt to your own needs.

We hope you enjoyed this article. Feel free to comment on it, share it, and let us know how you create sites built with Next.js and manage the content with Strapi. Stay tuned to Gravel Engineering for our next article!