Web Portals with Strapi and Next.js

Benefits of Using Strapi with Next.js

• Increased flexibility: Strapi’s seamless architecture allows content to be used across different frontend interfaces, not only web applications. Combined with Next.js, it enables creating rich, interactive user experiences with smooth content updates.
• Multilingual support: Strapi supports multi-language content management, allowing businesses to reach a global audience by delivering content in multiple languages directly from the CMS.
• Speed and performance: By using Next.js on the frontend layer, our solution leverages its server-side rendering (SSR) capabilities, improving site speed and SEO ranking. Static Site Generation (SSG) in Next.js ensures fast load times and a smooth user experience.
• Scalability and security: The combination of Strapi and Next.js supports high traffic loads, making it ideal for enterprise-level deployments. Both platforms are designed with security in mind, providing robust measures for protecting data and content.
• Advanced user interfaces: We enable the development of advanced user interfaces such as client portals with registration and secure login. This allows users to interact with the portal as active clients, accessing services and information online. These portals are designed to increase user engagement and provide easy content management, making them friendly for both site administrators and visitors. They serve as a key touchpoint for delivering personalised experiences and tailored content directly to users.

What is Strapi in Detail?

Strapi is a headless CMS (content management system) based on Node.js, built on the Koa.js framework. This means that on the backend level it leverages JavaScript and asynchronous programming. Strapi stores data in your chosen database (PostgreSQL, MySQL, SQLite, MongoDB, and others are supported). Data structures (content models) are defined by the developer via the admin panel or configuration files.

A key aspect of Strapi is the automatic generation of APIs (Application Programming Interfaces) based on defined content models. By default, two main types of APIs are generated:

• RESTful API: This API follows the REST (Representational State Transfer) architecture. Standard HTTP methods are used for interactions:
  • GET: Request to retrieve data (e.g. a list of articles, a specific entry). Data is returned in JSON (JavaScript Object Notation) format in the HTTP response body.
  • POST: Request to create a new resource (e.g. form submission). Data is usually sent in JSON format in the HTTP request body.
  • PUT/PATCH: Request to update an existing resource. Data is also sent in JSON format in the HTTP request body.
  • DELETE: Request to delete a resource.

  Access to these endpoints is via specific URLs (URIs - Uniform Resource Identifiers), which are automatically generated based on your content model names (e.g. `/api/articles`, `/api/products`).

• GraphQL API: Strapi also provides an API based on GraphQL – a query language for APIs. Unlike REST, where you usually get a fixed set of data, GraphQL allows clients (e.g. Next.js) to request only the data they actually need. This improves efficiency and reduces the amount of transferred data. GraphQL uses HTTP POST requests, where the body contains the GraphQL query string. Responses also come in JSON format. Strapi automatically generates a GraphQL schema based on your content models, including types, fields, queries, and mutations.

Authentication and authorisation in Strapi can be implemented in different ways, including JSON Web Tokens (JWT) for both REST and GraphQL APIs. This ensures secure access to content and administrative features.

How Does Next.js Work with Strapi?

Next.js, as a React framework for building frontend applications, works with Strapi by sending HTTP requests to APIs provided by Strapi. This can be either RESTful or GraphQL API, depending on developer preference and project requirements.

Fetching data:

• RESTful API: In Next.js components (e.g. in `getServerSideProps`, `getStaticProps`, or inside client components using `useEffect` and `fetch`), you will use the standard `fetch` function (or external libraries like `axios`) to send HTTP GET requests to Strapi endpoints. For example, to fetch a list of articles you send a `GET` request to `/api/articles`. Strapi returns the data in JSON format, which is then processed and displayed in Next.js components.
• GraphQL API: To interact with Strapi’s GraphQL API, Next.js uses dedicated GraphQL clients (e.g. `Apollo Client`, `Relay`, `urql`). You define GraphQL queries to fetch the needed data and send them to the Strapi GraphQL endpoint (usually `/graphql`) via HTTP POST requests. The GraphQL client handles serialising the query and deserialising the JSON response.

Submitting data:

• RESTful API: For submitting data (e.g. form submissions), Next.js sends HTTP POST, PUT, or PATCH requests to the appropriate Strapi API endpoints. Data is usually serialised to JSON and included in the request body.
• GraphQL API: For modifying data (e.g. creating or updating entries), Next.js uses GraphQL mutations, sent to the Strapi GraphQL endpoint via HTTP POST requests.

Where the data comes from:

• Strapi: Data is stored in the configured database. Strapi retrieves, processes, and exposes this data via its APIs (RESTful or GraphQL) in response to HTTP requests from Next.js.
• Next.js: Next.js does not store the content data itself managed by Strapi. It fetches the data via Strapi’s APIs and uses it to render the user interface. Next.js may temporarily cache some data for performance optimisation, but the source of truth is always Strapi’s database.

Authentication and Authorisation in Combination

To protect content and APIs, Strapi uses authentication and authorisation mechanisms. Next.js must authenticate correctly when requesting protected resources. This may involve sending tokens (e.g. JWT) in HTTP request headers, which Strapi verifies to determine access rights.

Features of Static Site Generation (SSG) and Server-Side Rendering (SSR)

• SSG (Static Site Generation): When using static generation in Next.js, data from Strapi APIs is fetched at build time. Next.js pre-generates HTML pages with the data already embedded. This means that when a user visits the site, the browser receives ready HTML, ensuring extremely fast loading. Functions like `getStaticProps` are used for this.
• SSR (Server-Side Rendering): In server-side rendering, data from Strapi APIs is fetched on each user request to the Next.js server. Next.js renders the HTML page on the fly with the latest data and sends it to the browser. This ensures up-to-date content but may slightly increase server response time. The `getServerSideProps` function is used for this.

Summary

The integration of Strapi and Next.js relies on standard web protocols such as HTTP and data formats like JSON. Strapi acts as the backend, providing content through RESTful or GraphQL APIs, which Next.js uses to fetch and display data in the user interface. The choice between REST and GraphQL depends on the project’s needs. Next.js can fetch data either during build time (SSG) or on every user request (SSR), depending on requirements for data freshness and performance.