Build a blog with Next (React.js) and StrapiАвтор - Стрижников В.К.Опубликовано - 2022-03-02

Introduction Note: The content of this tutorial was revised and updated on February 2, 2022. Some other information such as the title might have been updated later.

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:

  • React
  • Gatsby
  • Vue
  • Nuxt.js
  • Angular Next.js is an open-source Reactfront-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 back-end and Next.js for the front-end.

Prerequisites This tutorial uses Strapi v4 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 our expansion team who developed a series of Strapi templates that you can use for some different use case.

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.

Create your Strapi backend folder using the Blog template.

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.

Форма обратной связи

Нажимая на кнопку "Отправить" Вы даете согласие на обработку своих персональных данных в соответствии со статьей 9 Федерального закона от 27 июля 2006 г. №152-ФЗ "О персональных данных"

Автоматизация бизнесапод ключУзнай подробностиПо телефону+7 903 827-66-44

Задай вопрос в онлайн-чате или по почте vopros@intersell.site