What is the best way to integrate Next.js with Strapi (or the other way around)?

My goal is to develop an application utilizing Next.js for the frontend, fetching data from a Strapi API hosted on the same server. The plan is to have Strapi handle API and admin routes, while Next.js manages all other routes. I intend to use fetch in Next.js to retrieve data from /api/(collection)/(id)*. Is this feasible? Does it make sense? If so, how would it work? After considering various options, I believe that Next.js + Strapi offers the best functionality.

I am aware of hosting both applications separately and accessing data through API URLs, as I have implemented this method in detail before. However, I find the idea of having Strapi manage admin routes distinct from Next.js for a more efficient workflow appealing. This approach eliminates the need for maintaining two separate hostings just for this purpose.

Answer №1

It is currently not feasible for Strapi to be integrated into your Next.js app, and it may never be possible in the future. Consider using a monorepo tool like turborepo to tightly integrate all aspects of your codebase.

Attempting to run a React app from your Strapi server using Koa may be an option, but it is a risky path to take and might not work well with Next.js.

The upcoming release of PayloadCMS version 3 seems promising as it allows for direct integration of the backoffice tool into your Next.js app.

If you are transitioning to a serverless setup (such as with Vercel), remember that you will still need servers for disk storage and databases unless you opt for serverless solutions for those components as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a script in JavaScript to execute a command or query after midnight

I have a query regarding MongoDB and JavaScript (Express.js). Here is the scenario: I am working on developing a backend service for movies and TV series. I have already set up basic routes and functions. One of my requirements is to select a movie from ...

The file always fails the Regex test in Node.js

I am dealing with a log file that contains lines structured like this: [Thu Mar 30 2017 11:24:51 GMT+0100 (WEST)] {"serial":"CA-2M-1107619","type":"iface","body":{"action":"up","device":"tun_man","ip":"127.255.0.10","ip6":"2016:900d:c0de::1001"} My goal ...

Tips for applying a class to an element depending on data stored in Local Storage using JQuery

I am currently working on a TODO list project with functions to save and delete records already in place. However, I am facing challenges with the functions for marking items as important and done. One method I use is to retrieve saved items from Local St ...

The Observer<T> generic type necessitates the specification of 1 type argument

I'm currently trying to grasp the concept of Observables in Angular 4. While watching a tutorial video on it, I attempted to create my first Observable but encountered an error in my IDE: The generic type Observer requires 1 types argument(s) Here ...

The JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Good day, I've been using the jQuery "chosen" plugin for a dropdown menu, but I encountered an issue with it being located in a scrollable area. The problem is that the dropdown items are getting cut off by the outer div element. I have provided a si ...

Utilizing an EJS variable within a React render function with webpack - A Guide

I am looking for a way to display personalized information stored in a MySQL database to my users. I am using ejs, webpack, and React for my project. While I found some guidance on how to achieve this without webpack, it doesn't quite fit my needs. Th ...

Manipulating and Parsing HTML files locally using Node.js

Hey there! I have a bit of an odd question that might be on the basic side. I'm diving into web development and front-end work, so I'm still fairly new to it all. The Scenario To give you some background, my experience with JS is mainly from usi ...

Turning off strict mode in the bundling process of React with webpack can be achieved by following

I'm facing an issue with my application. It works perfectly in all browsers except for IE, where it throws the following error: 0x800a0416 - JavaScript runtime error: Multiple definitions of a property not allowed in strict mode In my webpack.config ...

Enhancing the efficiency of typed containers in JavaScript

Recently, I uncovered a clever method for creating fake 'classes' in JavaScript, but now I'm curious about how to efficiently store them and easily access their functions within an IDE. Here is an example: function Map(){ this.width = 0 ...

Is there a way to obtain an array after subscribing to an RxJS method?

I am struggling with the following code snippet: Rx.Observable.from([1,2,3,4,5,6]) .subscribe(x=>console.log(x)); Is there a way to modify this code so that instead of iterating through the array elements from the .from() method, I can return the enti ...

Enhancing Array values within a Hashmap in JavaScript: Tips for Adding more Items

Is there a 'bar' key in the hashmap that has an array as its value with only one item ['foo']? I want to add another item, 'foo1', to the same array. Is the following code the right approach, or is there a simpler way to achie ...

The initial character of the input must always be a letter

I need assistance with an input element that requires 5 characters, with the first character being a letter: <input mdInput #acronyme placeholder="Company" type="text" maxlength="5" minlength="5" required [value]="acronyme.value.toUpperCase()"> Th ...

Retrieving user information from the database and adding it to the specified element

I've been grappling with what seems like a simple question for the past hour. Below is a script that I have which pulls all active reservations from the reservations table. require("../includes/connect.php"); function dispAllReservations(){ $i= ...

How can I transmit information using Json and javascript?

Is there a way to utilize Json to collect data upon button press? I have tried using Javascript to create a function for the button, but I am struggling with integrating Json. Can anyone provide an example of how to achieve this? Below is the HTML code sn ...

Having issues with executing promises within map function in JavaScript

I am currently working on a JavaScript function that handles API calls within a map method. However, before completing all the tasks within the map method, my function is producing incorrect results. It is not meeting my expectations. Here is the code sni ...

Implement a validation function in the "jQuery validation library."

Hello, I am currently using the jQuery validation plugin to validate my form. I am trying to add an additional rule to the validation, but I am struggling to get it to work. The input value should be less than or equal to the previous element's value. ...

What is the reason that JavaScript does not run the code sequentially?

Looking for a solution with a simple function like this: function getArticles(page){ page = page || 1; loading = false; var articlesCache = getArticlesCache(page); if(articlesCache){ articles = articlesCache.data; }else{ make a request a ...

Retrieving component attributes using jQuery or alternate event handlers

In my Angular2 component, I am facing an issue with using vis.js (or jQuery) click events. Despite successfully displaying my graph and catching click events, I encounter a problem where I lose access to my component's properties within the context of ...

Is NextJS 14 serving stale cached data even when the external API returns an error response during the revalidation period?

Query Overview : I am currently working on an API route handler called ping, which interacts with an external mock API created using the Mockoon Tool. This mock API generates random status codes like 200, 404, 429, and 503 upon receiving requests. In my A ...

Is it possible to alter CSS based on the width of the webpage using javascript

We are currently developing a web application that will be deployed on various devices such as mobile phones, iPads, iPhones, and Android. Instead of using user agents to show different views, I prefer having CSS that adjusts based on the screen width. We ...