Next.js VS Strapi

Repository: Next.js

Next.js: npx create-next-app@latest

Remix is a very cool React-based framework that makes the final jump back from the browser to the server. After starting with SPAs that fully ran in the browser, Next.js got the idea of rendering React components in the server, reducing the initial load time and improving crawlability. Remix takes this a step further: while Next.js cannot render dynamic content on the server, Remix can. As a user, this means even faster loadings times for any kind of dynamic content, and as a developer, you don't need to think about server-side vs client-side components. You just write React code, and it works.

Here is the tricky situation and that's why CRA is in a semi-dead state, it has not been deprecated but isn't receiving any updates not even security updates, along with that the new React.dev documentation doesn't mention CRA but suggests using React meta-frameworks like Next and Remix for new projects. You can read more about React's reasoning for it in this github issue discussion.

Probably the most known example https://github.com/vercel/next.js/discussions/19065

It was not an issue if you host in Vercel, as they provide the image optimization as a premium feature.

Implementing the requested feature would make the framework much better when self-hosted elsewhere. But there is neglection to resolve the issue. This is just one case.

This Reactjs version also includes React Server Components, so you can easily render components on the server. If you’re familiar with Next.js, whose components are server components by default, this is the same idea. Server components have advantages such as faster page load time, better SEO optimization, and overall better performance.

Next.js - for creating the application’s user interface and backend.

On fresh install (ts version), every page inside /src/app will throw module not found errors on imports. This is probably because in tsconfig.json, moduleResoultion is set to bundler. More here - https://github.com/vercel/next.js/discussions/41189

Next.js is a powerful React framework, that is widely used for building server-side rendered (SSR) or static web applications. Dockerizing a Next.js application can streamline the deployment process and ensure consistency between development, testing, and production environments

https://strapi.io/ does this and much more.

It's primarily headless CMS but it produces solid db schema and sensible rest API.

Entities can be defined in json or in UI.

You get OAuth, admin panel, plugin ecosystem.

Before starting the tutorial on developing a personal target tracking application with Flutter, Riverpod, Strapi, and GraphQL, ensure you meet the following requirements:

Strapi is a headless CMS that helps you build content-based sites with the frontend of your choice by providing a reliable, customizable API backend. Strapi allows you to define your own content types, includes a feature-rich admin panel, and provides all of the building blocks you need to develop a comprehensive editing and publication workflow.

Strapi is a Headless CMS built with TypeScript. It has a backend and a frontend. Just take a look at how many configuration files it has just for running the project.

Strapi provides a centralized data managing platform. This makes it easier to organize, update, and maintain the FAQ data. It also automatically generates a RESTful API for accessing the content stored in its database.

https://prisma.io is popular as I understand it. I've been trying out https://strapi.io the last week and am thoroughly impressed.

They both do much more than build queries. One big thing both do is automate database migration calculations. Strapi goes further and gives you a CMS and admin UI on top, as well as doing a lot more of the complex query building from a json object. Both still require a fundamental understanding of the data model and SQL

As of April 2024, Strapi's GitHub repository has garnered 59.7k stars and 7.5k forks, showcasing its widespread adoption. The project has also secured a substantial $45+ million in funding, cementing its position as a prominent player in the headless CMS space.

const pages = await client.GET("/pages", { params: { query: { filters: { // @ts-ignore - openapi generated from strapi results in Record // https://github.com/strapi/strapi/issues/19644 path: { $eq: path, }, }, // @ts-ignore populate: { blocks: { populate: "*" }, }, }, }, });

On a side note. Where do all these endpoints come from? Strapi is open source. We can read the source code. All these endpoint come from the Users and permissions plugin. So, if we go to Strapi on github and browse around the files a bit eventually you will find the auth.js file that contains all of the routes. You can also find the Strapi controllers in there if you're interested.