Large scale projects challenges (NextJS - Contentful)

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

NextJS is an excellent full stack framework. Contentful is a well-known flexible headless CMS. Together are a great match, but when we talk large scale projects the challenges are completely different than the ones you may face in a small to medium scale project. Leonidas will try to raise your awareness on such challenges based on Greece's experience on redesigning Vodafone's site to create beautiful self-serve and guided journeys for Vodafone customers.

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

The main challenges include handling the coexistence of new and old stacks, dealing with cross-stack interactions, managing logging and session sharing between stacks, reducing duplicate code, and ensuring UI component compatibility.

Next.js is favored because it is a full-stack React framework that simplifies development by integrating both backend and frontend code in one place, which speeds up development, simplifies build processes, and enhances end-to-end feature creation.

Large organizations should focus on choosing a headless CMS based on extensibility, flexibility, and support. They need to consider the content authoring experience, advanced SEO tools, and ensure the CMS can handle the scale and complexity of large projects.

In large-scale projects, it's crucial to use global state wisely to avoid overuse, which can lead to maintenance issues and performance degradation. Combining global state management with libraries like React Query or SWR can help manage state more efficiently.

Strategies include using inheritance and composition patterns for content types, establishing clear naming conventions, documenting UI components with tools like Storybook, and ensuring a structured component library to facilitate global reuse and understanding.

A headless CMS like Contentful is beneficial with Next.js because it is front-end agnostic, allowing content to be served to any device and making it easier to switch technologies in the future. It complements Next.js by providing features like routing and SEO that are missing from headless CMSs.

Leonidas Mamais
Leonidas Mamais
20 min
21 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.

1. Introduction to Challenges in Large-Scale Projects

Short description:

Hi, I'm Leonidas. I will talk about challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. These challenges are different from small to medium-scale projects. Each organization has its own business model and specific needs, so there is no one-size-fits-all solution. The purpose is to raise awareness and provide considerations for this journey.

Hi, I'm Leonidas. I have worked as a front-end engineer for about 15 years and I'm currently working as a front-end chapter lead for Vodafone Greece. Today I'm going to talk to you about challenges that you may face if you try to implement or even worse, migrate a legacy stack to a modern React framework, such as Next.js along with a headless CMS such as Contentful, but in a large-scale project.

Next.js, as you already know, is an excellent full-stack React node framework and Contentful is a well-known headless CMS. But when we talk about large-scale projects, the challenges are completely different than the one that you may face in a small to medium-scale project. In most cases, having to migrate one or more large-scale projects means that you are already part of a big organization, which by its own raises additional challenges.

With the time available, it is really hard to discuss also solutions about these challenges. Except from the time factor, each organization follows its own business model and have very specific business needs, making one solution not appropriate for all cases. So the purpose of this presentation is to raise your awareness on challenges that you may have not faced until now, and what you need to consider if you and your team decide to take this big step and begin this exciting journey. So let's begin. Let's begin with the fact that applies to all modern frameworks and not especially the ones mentioned before.

2. Challenges in Large-Scale Projects

Short description:

If you work on a project with legacy code, consider the benefits of a modern stack framework. Analyze the project and estimate the time and resources needed for migration. However, in large-scale projects, this estimation may not be feasible. The new stack should coexist with the old stack during the migration period, requiring workarounds for logging, session sharing, cross-stack journeys, code duplication, and UI component sharing.

If you work on a project that uses a lot of legacy code, you and your team will sooner or later start thinking the benefits of a modern stack framework. It will be also very easy to convince business people of your company. More stable environment, better performance, faster development time, streamlined and efficient CI, CD automation, and all this stuff will lead to a faster time to market, improve the SEO ranking, help your customers.

So what are you going to do? You will have to analyze the project and design and end up with a rough estimation of time and resources needed for the migration to happen. And you're ready to go. Sounds perfect. Not exactly. In most cases of large-scale projects, analyzing and making the initial design in order to have this rough estimation is not even feasible. And if you manage to do it, you will end up with something like, hey boss, we need to two to three years to migrate to our new stack. Large organizations won't stop developing new features for their clients, so they won't allocate their full resources to migrate to a new stack. You will end up with a vague estimation and, most probably, if the migration happens, when you are done, the technologies that you chose will already be outdated.

What you should consider, your new stack should coexist throughout the whole migration period with your old stack. You will have to follow a granular approach and find workarounds for logging handling for both stacks if you have a logging mechanism, how you will share sessions between these two stacks, how you will handle cross-stack journeys, journeys that will start from your old stack and end up to your new stack, or the other way around, how you can reduce, duplicate code and maintenance while you will have two different code bases. Finally, you will need to find ways how you will share UI components to make this thing work.

3. Next.js and Collaboration with Isolated Teams

Short description:

Next.js is a great full-stack framework that allows front-end and full-stack developers to easily work with both the back-end and front-end code in the same project. It provides a straightforward development experience, enabling the creation of end-to-end features with ease. When collaborating with isolated teams, it's important to consider how to organize separate teams working together in the same repository and maximize code separation. Additionally, integrating other frameworks with Next.js is possible. Headless CMS, such as Contentful, is a suitable choice for Next.js as it provides the missing functionalities and allows for easy switching of technology or CMS in the future.

Next.js is a great full-stack framework. As front-end or full-stack developers, we find it very easy to have the back-end and the front-end code always available within the same project. I know where to write my server-side code, I know where my APIs live, where my front-end code lives. Development is much faster, I find it easy to create end-to-end features, and the build process is just one click. Since I understand the logic behind the framework and its structure, everything is straightforward.

Let's suppose that you are part of a big global organization, most probably you will have to cooperate with other completely isolated teams because that's how most big organizations do source allocation. Your team may have to work with back-end teams that are from the other side of the planet and may have not ever used NextJS. Let's see this example. Your team comes with a great idea for a new feature that will be great added value for your customers. Your team roadmap is already defined and you will have to find ways to fit this new feature inside the roadmap. Your PO communicates the feature and finds that there are a number of other countries that also find this feature useful. It's a great opportunity to use shared resources from all other countries and develop the feature together in order to develop faster, increase ownership and also increase reusability.

So people may be allocated from your team for the React part of the AI feature and another team that will work on Node.js will be selected. In the best-case scenario, the back-end team will find it weird to work with the same files and code base as the front-end team works. In the worst-case scenario this team may be too opinionated and they may be need to work with a specific Node.js framework, like for example Nest.js. Is everything ruined? No, you just need to consider some things. First is how to organize two separate teams working together in the same repo with the same files. Second, how to maximize code separation between those teams. And finally, how you can integrate other frameworks with Next.js.

Let's discuss Headless CMS for a while. In Vodafone, Headless CMS was the CMS of our choice when we had to make this big decision for a future CMS that will be our source of dynamic content and data for all our applications and devices for the years to come. In specific, we decided to go with Contentful, but there is a big number of great Headless CMS out there that more or less what we're going to say here will apply. Headless CMSs have great benefits. Your content is ready to be served to any device. You have to worry less about the content and more about the presentation layer, which is something that all developers want. It's front end agnostic, React, Vue, Angular, you name it. As a result, you have a CMS that is completely decoupled from your rendering part. So it makes it very easy to switch from the technology or CMS in the future if you need to. So headless CMS is a perfect match for Next.js since Next.js provides all the functionalities missing from headless CMS. For example, routing, SEO and in general Next.js also supports static size generation which is a technology where headless CMS is your best bet.

4. Challenges of Headless CMS in Large-Scale Projects

Short description:

Although headless CMS may present challenges in large-scale projects, such as content authoring experience and SEO tools, it is possible to overcome them with careful consideration and choosing the right CMS. The uptime of your end user's experience is crucial, even if your servers have high uptime. Large-scale projects often rely on legacy backend systems, which can have low uptimes and other issues. It is important to handle potential unavailability and crashes by analyzing each feature, implementing mechanisms like feature flags, and having advanced error handling, logging, and monitoring. Global state management is a useful tool to avoid prop drilling and store stateful information in complex applications.

Although headless CMS is the way to go when you have an in-house development team and you are working with modern JavaScript frameworks, some of the small disadvantages of a headless CMS may become challenges when you work in a large-scale project, especially in a large organization with a lot of content authors and more advanced SEO requirements from a dedicated SEO team. I will summarize them into categories, content authoring experience and SEO tools.

I think you can get away with both of these challenges in a small to medium-sized project, but not in a large one. There will be cases where the SEO team may need features like maintaining a list of url directs, editing a robot.txt file, previewing how Google renders your pages or metadata. Also when it comes to content authors experience, although most early CMSs have done great improvements in the last few years, things like content preview, content editing and in general the enhanced user experience are not the same level as in some traditional CMSs. With Contentful in specific there's nothing that you cannot achieve due to its custom apps features and this also I think stands true for a number of other headless CMSs. You can achieve everything but it requires some effort from your team to develop target features.

So what do you have to consider? Choose your headless CMS wisely based on your current and future needs. Focus on extensibility, flexibility and support. Most SaaS products today offer sufficient uptime SLAs like 99.99999% etc. Even if you do your own headless CMS implementation, you will most probably host it in a cloud service like AWS which also offers almost 100% uptime. Calculating the fact that you can also use a number of additional caching layers for your data in order to ensure uptime, even if your SaaS products fail, then you can be sure that you will have 100% uptime for your great features. The metric that counts most is the uptime your end user experiences and not the uptime that your servers have. Most of the time, the features in large-scale and complex projects are dependent on a number of legacy backend systems to retrieve any kind of data. These systems, most of the time, are handled by different departments in the organizations and may have low uptimes, bad patch update practices with long maintenance periods, and a number of other issues. Moreover, some of your web app features may be strongly related to business functions and services which may rise up issues unrelated to their network. For example, a click-to-call service where suddenly your call center goes down and your feature will appear unresponsive to your user. Maybe a live chat could be a great example. And the list can go on. Unavailability on all of these cases may not mean actual unavailability to your web app, but if it's not handled correctly, it may lead to crashes and bad user experience.

So, what you should consider. You need to analyze all these cases for each feature. You need to create mechanisms, like, for example, feature flags, that may help you change your user experience on the fly when such a crisis happens. Also, you need to have advanced error handling, and finally, you need to have an effective logging and monitoring mechanism to catch unhandled cases. Most of us are used to the global state concept and we have been applying this pattern in our apps extensively. There is a number of popular third party libraries, such as Redux and MobX, that can help you manage your global state in the application. React also offers context API and user-to-user hook for the same reason. Global state is a great way to avoid prop drilling and store stateful information when many of your components need access to it. I am pretty sure that this is not the first time that you are hearing someone talking about global state overuse or abuse or something like that. As we mentioned before, global state is a very useful tool.

5. Challenges of Global State in Large-Scale Projects

Short description:

A large-scale project can easily become burdened with a hard-to-maintain global state. Overusing global state can lead to excessive boilerplate code, performance issues, and confusion for inexperienced developers. It is important to use global state wisely and consider using state management libraries like React Query, SWR, Recoil, Jetty, and Zoostack for better performance and ease of use.

Unfortunately, a large-scale project is the best playground to end up with a huge and hard-to-maintain global state if you design your application to be global state heavy. The extensive use of global state increases boilerplate code and may give a really hard time to an inexperienced or new developer to grasp what's happening. In addition, a number of performance issues may be related to the extensive or bad use of global state. We were surprised when we found out how many times we tend to use global state without even needing it. Global state is not evil, but overusing it may turn it to be evil.

So, what you should consider? Use global state wisely. Try a combination of a global state management library with a fetching library such as React Query or SWR. These libraries offer request duplication, client-side caching, and data updates without having you to touch the global state. Finally, I just want to mention that there is a number of modern state management libraries that are more focused on performance and ease of use like Recoil, Jetty, and Zoostack, which are very great libraries and alternatives to consider.

6. Code Reusability and Overcoming Challenges

Short description:

Code reusability is crucial in large-scale projects. React promotes reusable components, but there are challenges in effectively communicating and guiding code and component reuse. UI component reusability affects content type reusability in headless CMS. Consider inheritance and composition patterns, naming conventions, documentation tools, workflows, and component library structure. Streamline the process of contributing reusable components and explore ways to reuse GraphQL queries. Next.js and headless CMSs are great choices, but developers need to push boundaries and prioritize accessibility and flexibility. Techniques like separating frontend and backend code, microfrontend approach, feature flags, documentation tools, context API and SWR, custom apps, content-as-code, and Atomic Design pattern can help overcome challenges.

Code reusability is one of the most important things when it comes to projects, especially large-scale ones. React by itself is based on the philosophy of reusable components. There is a number of things that you can make reusable inside your project, for example functions, components, hooks, GraphQL queries, APIs, and the list can go on.

In a headless CMS, you need to focus on reusable content types to ensure reusability. With all these choices, it seems easy to have a scalable and easy-to-maintain project. The challenge here is not framework or CMS-specific, but project-scale specific. Think of an environment where 15 different local teams plus an unlimited number of teams around the globe are working on the same project. It's a challenge to effectively communicate the details and requirements for code and component reuse, and it's difficult to provide adequate guidance and feedback on their use of code. It's very hard to have everyone aligned with the process. And the issue with UI component reusability will soon lead to issues with content types reusability in your CMS since your content types need to be mapped with your UI, at least with your core UI components.

Also, you will find that the amount of GraphQL query that you use to retrieve your data starts to become huge and you will find yourself using the same queries again and again. Introducing GraphQL fragments is a great way to improve this, but they may lead to bad practices such as the use of nested fragments if you end up overusing this pattern. So, there is a number of things that you need to consider in order to overcome these challenges. First, try to use inheritance and composition patterns for your content types in order to achieve maximum usability. Find naming convention patterns for your content types that are not feature-specific, so you can reuse them within other content types with a meaningful way for your content authors. Use appropriate documentation tools for your UI components, such as a storybook or a style guide to have a clear representation of all your components and all their variations. And also find the right workflows and ways to communicate them to your designers and business team. Use a meaningful structure for your components library. Streamline the process of contributing reusable components to a global scale, focusing on how fast a new developer can grasp the process. Finally, investigate on ways to reuse GraphQL queries, avoiding pitfalls.

I think after six laps, I have to come to a conclusion. Don't get me wrong, Next.js, as other popular frameworks, are great to use under any circumstances and headless CMSs are the way to go, and most probably what we will use in the future. That's why we chose to use them and we will still do. Working with large-scale projects needs from the developers to do the extra mile and push framework boundaries to their limits. What you should be looking for in a framework or a CMS is accessibility and flexibility so you can overcome all the obstacles. After raising the challenges, let me thoroughly present you a list of techniques that we already use or we are in the process of implementing that may sound interesting to you. We have separated our frontend from our backend code in the filesystem level. We also decided on a microfrontend approach for team isolation and easier code maintenance, converting one large project into multiple small ones. We use feature flags to handle user experience on-the-fly when we need to address an availability. We use storybook and other documentation tools to document our components. We are using a combination of context API and SWR for our global state management. We create a number of custom apps inside Contentful to customize user experience and integrate Contentful with other third-party services and create features that are hard to find in handless CMSes out-of-the-box. We use the content-as-code approach for all our content, and finally we use the Atomic Design pattern to structure our components. As I told you in the introduction, there is no remedy for all ills or difficulties.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top ContentPremium
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Power Fixing React Performance Woes
React Advanced 2023React Advanced 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Top Content
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session.
You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing
This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.
From Frontend to Fullstack Development With Next.js
React Summit 2025React Summit 2025
91 min
From Frontend to Fullstack Development With Next.js
Featured Workshop
Eric Burel
Eric Burel
Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
Workshop
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Fetch, useEffect, React Query, SWR, what else?
React Advanced 2023React Advanced 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others