At this article I will show you the advantages of doing a website with Strapi in the backend and Next.js in the frontend
at the time I wrote this article back in 2020, Directus was using an old Zend Framework in PHP that made a very interesting project full of features buggy,and not so easy to deploy and mantain as Strapi
But as Matt Williams stated in the comments the Directus team made an incredible effort rewriting their entire CMS in Node.js and soon in Laravel 8 too.
First of all… What is Headless CMS?
In short, it is a content management system like WordPress, Drupal or Contentful in which content management is separate from the presentation layer (Front-end).
The main advantage of this approach is that it is tech independent, which means that the website (can be made in SPA frameworks or as you wish), native apps or can be created using the tools or tech you want.
The main disadvantage is that you need to manage two or more web applications instead of one. (Which can be a disadvantage, depending on the formation of your team.)
There are CMS that come as Headless standard (API-based), and some that are GIT-based, and generate static websites.
And others that are also based on API but that do not come in this architecture by default and it is necessary to use plugins.
The advantage of being Headless and API-based by default is that:
- you have a source of information and can make many applications for different devices from it.
- The fact that it is a core functionality of the CMS, indicates that the chance of support and updates to the Headless API are greater, whereas if it is a plugin the chance of not being supported may be more likely.
If you want to know more about Headless CMS,than take a look here: https: /headlesscms.org/
Why use Strapi?
Strapi is an Open Source CMS, made in Node.js and MongoDb, it also supports MYSQL, MariaDB, SQLite and PostgreSQL.
Comes with easy deployment to AWS, Digital Ocean , Heroku and many other cloud services.
It has rich documentation and several tutorials on how to use the CMS.
It is possible to install locally via CLI or using Docker, or using online services such as Platform.sh or Digital Ocean, or wherever you want.
It is possible to do unit tests with Jest, or other test frameworks, since Strapi has a configurable webpack.
Strapi, also has webhooks to trigger actions for other applications.
Strapi's architecture is very simple and well-founded, it explains how to write plugins, how to model the Strapi API, how to manage the content to be exported.
Strapi's learning curve might be between low and medium, it depends on the developer's knowledge with Node.js and the concept of CMS Headless, if the developer has any doubts he can take a look at the existing examples, tutorials or documentation.
It is possible to restrict JWT apis calls to Strapi user groups.
Internationalization is only possible with a workaround, creating fields suffixed by languages
The main competitor of Strapi in the Node.js world is Ghost, and OpenSource is Directus (made in PHP), also WordPress with its Rest Api that since version 4.7 is part of the WordPress Core and no longer made by plugin.
Of these 4 Open Source options, I consider Strapi the better, because you understand how simple it is to manage and extend it.
WordPress in addition to security issues, has a different base concept than Strapi. You can achieve the same goal as Strapi, but by making more settings and using various plugins.
Ghost presents a somewhat similar scenario, but often to do the same thing you do on Strapi you will need more work for the same thing.
Ghost is very good on the security side, but on the content side, Strapi is simpler and more complete.
Directus is one of the CMS that presents, a proposal very similar to Strapi, but its stack is made in PHP, and has bug reports critical by users.
Why Next.js?
With the rise of SPAS frameworks, going from Angular.js, React, Angular 2+ and Vue,a major faced problem from apps rendered on the client,face it is the issue of SEO.
Frameworks like Next.js come to solve this problem.
Rendering the application via SSR (Server Side Rendering) or SSG (Static Site Generation),than the search engine can read the content of your page, and render it for show in its results.
But the benefits go beyond that. Next.js increases the loading performance of your application.
In a basic test on Google LightHouse (we will address this soon), an application with create-react-app x a Next.js SSR application, had a first meaningful paint with 87% less time than a React CSR application (Client-side Rendering), this is due to Next.js already render part of your application on the Server, bringing the content on the screen before loading everything on the client.
It has a folder and links scheme that also allows the lazy-loading of modules, as well as automatic code-splitting.
You can choose which pages you will render on the server and which you will render statically, making it a Hybrid app.
Next.js supports AMP (Acellerated Mobile Pages): Where it wont render anything from Node.js and React, and only pages in AMP format.
Next.js also supports the entire range of CSS universe, from preprocessors such as SASS, LESS and Stylus, as well as CSS Modules, Styled Components, CSS-in-JS, TailWind CSS, Bootstrap etc.
Next.js has a very strong focus on performance, and has tools for you to measure that. (This will be the subject of a separate article).
We are able to use Next.js also with TypeScript, assuring how we handle our application data using interfaces and types.
Inside Next.js you can also do DynamicImports, using the ES2020 syntax, and generating components dynamically.
These are some benefits of Next.js, in addition to solving and helping us with the SEO problems of the SPA frameworks, it gives us the entire React ecosystem, to be able to work, in addition to helping us, with a lean structure and a very rich documentation.
some companies using Next.js: GoDaddy,Netflix,Marvel,Invision App, Tencent, Tiktok, Uber, Trip.com, HostGator, Auth0, Binance, Staples, TicketMaster, Playstation, IGN, AT&T, Hulu, Twitch, Nike, Lego, Material UI, Expo, Ferrari, Avocode, Styled Components, Volvo, The Economist,Workable, Vodafone, Coinmarketcap, Monday, Elastic, History Channel , A&E Tv, Lifetime, Hackernoon, Spotify, Pier, DAZN, Apify,CloudBees, Deno,Crazygames.com
Next.js x Nuxt x Angular Universal x other React SSR Frameworks:
There are other frameworks, which compete directly with Next.js
The idea is not to make a comparison between them. But basically each one follows a tool, be it Nuxt.js with Vue, or Angular with Angular Universal.
The idea is not to make a comparison here, because that would be a theme for an entire article, just to give an idea that there are other options on the market.
Within the React ecosystem there are other ways to achieve the same goal, either with After.js, Razzle or React-SSR.
Starting witn Next.js + Strapi: Boilerplates
Boilerplates are ready to use codes that allow us to start an application without having to configure it from scratch.
They are very useful to go out coding our application without wasting time with installations and configurations.
Below I will mention some that I think are good to start in the Next.js and Strapi universe:
- Strapi Next.js Blog Boilerplate (made by the Strapi team)
- Next.js Strapi Example (made by the Next.js team)
References:
Strapi Documentation
Next.js documentation
10 Reasons you should use a Headless CMS
Top comments (8)
I think it's worth highlighting directus 9 is a complete rewrite in node and is nearly complete
That will be very interesting, Directus has some functionalities that Strapi doesnt have, and this will be a big challenge to the Strapi Team. Thanks for your comment, may you allow me to add this at the article, reffering you?
Sure, I don't mind.
directus.io/open-source/#install - no PHP
Yes I see they changed all the stack, and now is a very good alternative for Strapi
Bom dia. Está tendo problemas para deployar apps com nextjs recentemente? Deparei-me com um problema em que no processo de build não encontra o webpack. Tentando resolver e até agora não consegui.
Tem como compartilhar seu código via Github?
Well done, Ruben! Thanks for sharing.