Introduction

Vactory is based on Drupal which is a popular content management system (CMS) that allows you to create and manage websites and web applications, And Next.js which is a flexible React framework used for building web applications. While Drupal is primarily a backend system, Next.js is focused on frontend development.

But how are we connecting these two technologies?

Drupal provides various methods to expose data via APIs. We can use the JSON:API module, RESTful Web Services module, or create custom endpoints using Drupal's built-in capabilities. The API should expose the content and data we want to consume in our Next.js application.

Then in our Next.js application, We use client-side or server-side code to fetch data from the Drupal API endpoints using built-in Fetch API and/or libraries such as Axios to make HTTP requests to retrieve the required data.

Once we have retrieved the data from Drupal, we can render it in our Next.js components utilizing the power of Next.js and React to create dynamic and interactive UI components that display the Drupal data in the desired format we want.

By combining the strengths of Drupal's content management capabilities with Next.js's flexible frontend framework, We have created a powerful and dynamic web applications that leverage the strengths of both platforms which we called it ✨Vactory Next (V4)✨

But first, Let's take a look at Vactory Next folder structure