DEV Community: Chris Lojniewski

Best CMS in 2025: Sanity vs WordPress

Chris Lojniewski — Thu, 18 Sep 2025 09:34:10 +0000

Sanity and WordPress for Content Management

When building a new website or app, picking a CMS can affect your site’s current and future performance. For many teams, the decision comes down to Sanity vs WordPress, and their two very different approaches to content management.

WordPress offers familiarity, a huge plugin ecosystem, and community support. Sanity has a structured, API-first approach, real-time collaboration, and integration with frameworks like Next.js.

Today, we’ll compare Sanity and WordPress side by side. This article will cover performance, workflows, costs, ease of use, and security, all to help with choosing the right content management for your project.

Headless CMS vs Traditional CMS

Before comparing Sanity and WordPress directly, we need to understand the difference between a headless and traditional CMS platforms.

A traditional CMS like WordPress bundles everything together: content storage, editing interface, design templates, and the frontend that displays your site. With that, launching your site is very easy. However, since your content is coupled to one presentation layer (the website), delivering the same content to an app or a digital display can be tricky.

A headless CMS separates content management from presentation. Content is stored in a structured way and delivered via APIs, so developers can connect it to any frontend. It allows for more control, but requires expert knowledge for set up and maintenance.

Overview of Sanity and WordPress

What is Sanity CMS?

Sanity is a headless content operating system launched in 2017. Unlike WordPress, which is monolithic, Sanity separates content from presentation, letting you deliver content to any frontend via APIs. It’s built for developers who want structured content models, modern workflows, and easy collaboration in content editing.

Who Owns Sanity CMS?

Sanity was founded in Oslo, Norway, by Even Westvang, Simen Svale Skogsrud, and Magnus Hillestad. The company, Sanity.io, continues to maintain and develop the platform, which has attracted global clients and investors, including notable brands like Puma, Morning Brew, Cloudflare, and AT&T.

Use Cases of Sanity

Sanity is often chosen when teams need a developer-first CMS that’s easy to scale, but it also has its uses for:

Content-rich websites and apps.
E-commerce solutions.
Multi-channel publishing.
Enterprise content hubs.
Design-driven websites.

What is WordPress?

WordPress is a traditional CMS that allows you to create, publish, and manage websites without building everything from scratch. It powers more than 40% of all websites worldwide and holds around 60% of the CMS market share. Its popularity comes from accessibility: with over tens of thousands of free themes and 65,000+ plugins, it offers options to extend features and get a website up and running quickly.

Who Developed WordPress?

WordPress was created by Matt Mullenweg and Mike Little in 2003 as a fork of a blogging tool called b2/cafelog. Today, it is an open-source project maintained by a large community of contributors and backed commercially by Automattic.

Use Cases of WordPress

WordPress is used for everything from personal blogs to enterprise websites, and its most common uses include:

Blogging and publishing.
Business sites.
Online stores.
Membership and community sites.
Enterprise websites.

Need Help Deciding Between Sanity vs WordPress? Talk to Our Experts

What is the Difference Between Sanity vs WordPress for Developers?

Choosing between Sanity and WordPress depends on how you want to build and scale your site over time. Here’s how the two compare across the areas that matter most.

Feature	WordPress	Sanity
Content Modeling	Pages, posts, custom post types; rigid for advanced needs	Schema-based, structured, reusable content
Pricing	Free core; costs for hosting, themes, plugins, or VIP	Free tier; usage-based pricing as projects grow
Performance	Depends on hosting, caching, and plugins	API-first; fast with frameworks like Next.js
Integrations	59k+ plugins and 11k+ themes	API-driven; integrates with Vercel, Shopify, Algolia
DevEx & UX	Easy for beginners; limited flexibility for devs	Developer-first; code-defined models, customizable Studio
Workflows	Basic publishing; advanced workflows need plugins	Real-time collaboration, versioning, structured flows
Security	Relies on hosting and plugin updates; vulnerable if outdated	Managed backend; API-based security, smaller attack surface
Hosting	Requires separate hosting (shared, managed, or VIP)	CMS is fully managed; only host the frontend

Content Modeling

WordPress: Since it’s a traditional CMS, it uses the classic model of pages and posts. It allows for the customization of post types, fields, or plugins. However, its structure is relatively rigid, which can lead to complex workarounds for more advanced needs.

Sanity: Its structure is built around schemas, which are sets of rules defining how your content is structured. You can specify exactly what types of content you need, and Sanity enforces that structure. Thanks to that, reusing content across different platforms becomes much easier.

Pricing

WordPress: The core CMS is free and open source. You still need to factor in hosting, premium themes, and paid plugins. The final costs can vary widely depending on whether you run a small site on shared hosting or an enterprise setup on WordPress VIP.

Sanity: Has a free plan with limited API requests and users, plus paid plans that scale based on usage (API calls, storage, seats). It can be cost-effective for small projects, but as your traffic or content needs grow, so do the costs.

Performance

WordPress: Runs on PHP and MySQL. Its performance depends heavily on hosting quality, caching plugins, and CDN setup. The right configuration can handle large traffic, but out of the box, WordPress is less optimized.

Sanity: Headless by design, it serves content via APIs. When paired with modern frameworks like Next.js, sites can be pre-rendered for fast load times and excellent Core Web Vitals. Scaling is handled by Sanity’s managed infrastructure, so heavy traffic is less of a problem.

Scaling a 100K+ Page Medical Platform with Next.js & Sanity

READ CASE STUDY

Integrations

WordPress: Famous for its plugin ecosystem, and for good reason. WordPress offers thousands of plugins and themes, and you can add SEO tools, payment gateways, and more without custom coding.

Sanity: Its flexibility comes from APIs, not prebuilt add-ons. Doesn’t use plugins in the same way. Instead, it integrates with developer tools and modern platforms like Vercel, Shopify, or Algolia.

DevEx & UX

WordPress: Non-developers find WordPress easy to pick up, thanks to a visual dashboard, What You See Is What You Get (WYSIWYG) editing, and prebuilt templates. Developers, however, might find customizing beyond themes and plugins cumbersome.

Sanity: Geared towards developers. Content models are code-first, and frontends are built with frameworks like React and Next.js. For editors, Sanity Studio offers a smooth experience and a customizable UI. Its initial setup does require some technical expertise.

Workflows

WordPress: Content creation is pretty straightforward, but advanced workflows (approval chains, editorial review, versioning) often require extra plugins. Collaboration features are limited compared to modern tools.

Sanity: Focuses a lot on the workflows. Real-time collaboration, version history, and structured editing make it a great choice for larger teams.

Building a Super-Fast Sanity Website for the Extraordinary Hotel at the Edge of the World

READ CASE STUDY

Security

WordPress: The security of your WordPress site depends largely on hosting and regular updates. Vulnerabilities often come from outdated plugins.

Sanity: Security is centralized rather than plugin-driven. Its headless architecture reduces the attack surface since the CMS doesn’t directly serve the website. Content is delivered through secure APIs, and infrastructure is managed by Sanity.

Hosting

WordPress: Requires hosting to run. Since its performance and security can vary depending on your provider, enterprise users often opt for WordPress VIP.

Sanity: A fully managed, cloud-based platform, letting you scale as you please. You don’t need to worry about hosting the CMS itself; you only host your frontend (e.g., on Vercel or Netlify).

Sanity: Pros and Cons

What Are the Benefits of Using Sanity?

Sanity stands out from other CMS options as a modern, headless CMS built for flexibility and performance. Its main advantages include:

Flexible content modeling. Define custom schemas to structure your content just the way your project requires.
Real-time collaboration. Multiple team members can edit content at the same time in Sanity Studio, with updates appearing instantly.
Developer-first approach. Sanity allows a seamless integration with third-party tools.
Customizable editor. You can tailor the editing environment to match your content needs.
Performant and scalable. Content is delivered through Sanity’s managed Content Lake, optimized for speed and large-scale usage.
Reusable content. Write once, publish anywhere: websites, mobile apps, IoT, or digital displays.

What are the Cons of Sanity CMS?

Teams without technical resources can find some aspects of Sanity challenging:

Steep learning curve. Setting up schemas and connecting a frontend requires coding knowledge, unlike WordPress’s plug-and-play approach.
No traditional themes or plugins. You can’t just install a theme or plugin to get started. You’ll need a developer to build and integrate the feature you want.
Scaling costs. Sanity’s free plan is a great value for small projects, but heavy API usage, large datasets, or many team members can increase monthly costs.
Hosting split. While Sanity hosts the CMS, you must host your frontend separately (e.g., on Vercel or Netlify), which adds an extra step for setup.
Smaller ecosystem. Sanity has strong community support, but its ecosystem of third-party integrations is much smaller compared to WordPress.

WordPress: Pros and Cons

What Are the Benefits of Using WordPress?

WordPress is one of the most popular content management solutions for modern web development for several reasons:

Free and open-source CMS. Anyone can install and use WordPress at no cost, making it accessible or individuals and businesses both.
Huge plugin ecosystem. With nearly 60,000 plugins, you can add features like SEO optimization, e-commerce (WooCommerce), contact forms, and analytics to your site without custom code.
Thousands of themes. Free and premium WordPress themes allow you to get your website running quickly with no experience needed!
Ease of use. The dashboard and WYSIWYG editor make content management approachable even for non-developers.
Community support. WordPress has a massive global community that shares tutorials and support, lowering the barrier for learning.
Scalability. With the right hosting and setup, WordPress can handle all types of websites, personal blogs, and high-traffic enterprise sites alike.

Disadvantages of a WordPress Site

While WordPress offers plenty of strengths, it also comes with limitations and risks:

Performance issues. Out of the box, WordPress might be slow. Performance metrics often rely on caching plugins, CDNs, and optimized hosting.
Security vulnerabilities. Its popularity makes it a frequent target for hackers. Many breaches come from outdated themes or plugins.
Plugin dependence. Extending functionality often means installing multiple plugins, which can lead to compatibility issues and heavier sites.
Maintenance overhead. Regular updates for plugins, themes, and WordPress core are necessary to keep a site secure and stable.
Limited content modeling. The post/page/custom post type structure is less flexible compared to modern headless CMS platforms.
Design limitations without coding. While themes help, customizing them deeply often requires PHP, HTML, or CSS knowledge.

When to Choose Sanity vs WordPress

Use Case	Choose Sanity if…	Choose WordPress if…
Project Type	Multi-channel platforms, apps, and scalable sites	Blogs, portfolios, small business sites
Content Needs	Structured content, reusable across channels	Simple pages and posts managed in one place
Team	Developer-led teams who can define schemas and build frontends	Non-technical teams managing content via dashboard
Performance	High performance, Core Web Vitals, and scalability are priorities	“Good enough” performance with plugins and decent hosting
Setup	You’re okay with a steeper setup for long-term flexibility	Non-technical teams managing content via a dashboard
Workflows	You need a fast, out-of-the-box setup with themes/plugins	Basic content publishing without complex workflows
Budget	Prepared for usage-based pricing as you scale	Relying on free core + low-cost hosting and plugins
Future Goals	Long-term growth, custom experiences, future-proof architecture	Quick launch, affordable maintenance, and community support

Sanity works best for projects that need flexibility and plan to scale in the future, though it requires some technical expertise. A structured content model, headless architecture, and integrations with frameworks like Next.js make it a great choice for high performance and developer-driven workflows.

WordPress is a practical choice for blogs, small businesses, and content-focused sites where ease of use matters more than technical flexibility. Free at its core with affordable hosting, WordPress allows for a quick site launch, thanks to the numerous themes and plugins. Non-technical teams can manage sites through their dashboard, with add-ons like WooCommerce or Yoast extending core functionality.

WordPress and Sanity: Which CMS is Best for You?

So, which one is the best CMS? Both Sanity and WordPress are powerful platforms, but they serve different needs.

WordPress is a tried-and-true choice for quick setup, affordability, and ease of use, especially for smaller websites, blogs, or businesses that rely on plugins to extend functionality.

Sanity, by contrast, offers a modern, developer-first approach and performance built for the future of the web.

Already on WordPress but feel limited by its performance or extensive plugin setup? At Pagepro, we specialize in helping teams migrate from WordPress to modern stacks like Sanity and Next.js to provide your website with the best performance.

Ready to Develop Your Website with Sanity? Get Experts on the Job.

FAQ

Is Sanity Free or Paid?

Sanity offers both options. It has a free plan with generous limits on users, content, and API calls. For larger projects, users can purchase usage-based paid plans that scale with their traffic, storage, and team needs.

Is WordPress Still The Most Popular CMS?

Yes. As of 2025, WordPress powers about 43% of all websites and holds over 60% of the CMS market share. Its huge ecosystem of plugins, themes, and community support keeps it the most widely adopted CMS in the world.

Which CMS Is Better Than WordPress?

It depends on your needs. WordPress is quick to set up and affordable, making it the favorite of blogs, small businesses, and content-driven sites. Headless CMS platforms like Sanity, Contentful, or Strapi c*an be better for projects that need multi-channel publishing and modern developer workflows*.

Is Sanity Better Than WordPress?

Sanity is better if you need flexibility and developer-first workflows. It also holds a 4.7/5 rating on G2, compared to WordPress’s 4.4/5.

WordPress is better if you want simplicity and speed. It’s free at its core, easy for non-technical users, and backed by a massive plugin ecosystem.

Can You Self-Host Sanity CMS

Sanity Studio is self-hostable, which means you can customize and deploy the editing environment on your own servers or domain. However, its backend, Sanity Content Lake, where all your content is stored and delivered, cannot be self-hosted.

Is Sanity Open-Source?

Sanity is a proprietary platform, but some of its parts are open source. The Sanity Studio framework is open source and customizable, and the core content infrastructure (Sanity Content Lake) is hosted and managed by Sanity.io.

Sources

How to Build a Music Streaming App with React Native

Chris Lojniewski — Tue, 02 Sep 2025 08:09:24 +0000

Introduction

Most of us use different music streaming apps daily. Spotify and YouTube Music are the most popular options, but did you know you can easily build a music streaming app with React Native?

In this article, I will introduce you to React Native Track Player, a React Native library that we can use to create a music app. It’s easy to implement, has a simple configuration, and functions that will make your music streaming application look fully professional on digital platforms.

We will discuss its most important functions, and finally, I will demonstrate how to build a music streaming app with React Native. With a little work, in terms of functionality, it will not differ from the top music mobile apps that you can find on Google Play and the App Store.

React Native Track Player

As I mentioned earlier, the article will be devoted to the React Native Track Player package. So it’s worth explaining what it is at the very beginning. As the welcome text in the documentation says:

A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!

Sounds good, right? By using i,t we will create a fully functional music application that we can control from the application level and externally.

Since we’re talking about the React Native library, we don’t have to build separate native apps for iOS and Android, but one music streaming service for both of them using the same code.

Features of React Native Track Player

Optimized Resource Usage: Designed to use minimal resources for optimal performance for app performance.
Cross-platform compatibility: Works across iOS and Android platforms, aligning with the native design rules.
Media Control Accessibility: Let users control the application through Bluetooth devices, lock screens, notifications, smartwatches, and car systems.
Caching Capability: Allows for the caching of media files, enabling playback when the internet connection is disrupted.
Background Playback Support: Continues audio playback when the app is in the background.
Extensive Customization: Offers customization options like customizable notification icons and lets devs tailor the UI as they want.

Native Modules

React Native Track Player operates on both iOS and Android devices. Underlying this compatibility are two native modules: SwiftAudioEx and KotlinAudio.

SwiftAudioEx is dedicated to operations for iOS devices. KotlinAudio works for Android to guarantee an optimized experience on this platform.

These native modules play a critical role in improving performance by using platform-specific functionalities. Specifically, they enable the storage of playlists in native data structures, which affects the app’s efficiency and performance.

With SwiftAudioEx and KotlinAudio, React Native Track Player delivers great UX, optimizing the library’s functionalities to the core features of each platform.

Why Choose React Native Track Player?

React Native Track Player is an optimal choice for a music app because of its streamlined integration process and cross-platform compatibility across iOS and Android.

The newest version of React Native Track Player, 4.1.2, was released in August 2025. Using native modules for platform-specific functionalities means high performance, and the library’s flexibility allows for easy customization of the app’s UI and functionalities.

A rich feature set, including audio playback controls, background mode support, and easy integration with external devices, offers efficient and optimized performance while saving resources**.**

Supported by extensive documentation and an active community, React Native Track Player is a reliable solution for creating music streaming apps in React Native.

“Working with React Native Track Player has truly simplified my approach to building music streaming apps. Its efficiency and user-friendly design make it a standout choice for seamless cross-platform development. From synchronizing audio playback controls to creating immersive user experiences, this library has transformed the way I work with the apps.”

Michal Moroz, React Native Developer at Pagepro

Don’t have time to build a music app on your own? Use our experience.

Platform Support

Before making your very own music streaming app, you have to understand that compatibility across different platforms is key. That’s why in this section, we’ll compare the supported streaming types and casting features on both iOS and Android platforms.

Stream Types

Casting

Miscellaneous

React Native Track Player functions

Now we can discuss the most basic functions provided by the library, which we will use later while building the app.

If you are interested in all the events and functions provided by the library (and there are a lot of them’s quite a lot of them), be sure to check the official documentation.

Player

Feature	Description
setupPlayer(options)	Setup player with options. Sample options: minBuffer, maxBuffer, maxCacheSize.
play()	Plays/resumes current track
pause()	Pause track
stop()	Stops playback
retry()	Replays the current track if it was stopped due to an error
seekBy(offset)	Seeks by a relative time offset in the current track
seekTo(seconds)	Seeks current track to specified time position
setVolume(volume)	Sets the volume
getVolume()	Gets player volume
setRate(rate)	Sets the playback rate
getProgress()	Gets the playback progress – position, duration
getPlaybackState()	Gets the PlaybackState – e.g.ready, playing, paused, stopped.
getPlayWhenReady()	Gets the state of playWhenReady

Queue

Function	Description
add(tracks, insertBeforeIndex)	Adds tracks to the queue
remove(tracks)	Clears the current queue and adds tracks to the empty queue
skip(index, initialPosition)	Skips to a track in the queue
skipToNext(initialPosition)	Skips to the next track
skipToPrevious(initialPosition)	Skips to the previous track
reset()	Resets the player and clear the queue
getTrack(index)	Gets a track object
getActiveTrack()	Gets active track object
getQueue()	Gets a queue
removeUpcomingTracks()	Clears upcoming tracks from the queue
setRepeatMode(mode)	Sets the repeat mode – Loops the current track / Repeats the whole queue / Does Not repeat

Building React Native Spotify

Since you’re familiar with React Native Track Player and its capabilities, let’s start with the development of our music app!

Features of Your App

A fully functional music player showing a sample playlist of music tracks.
Core functionalities include play and pause controls for the active song.
An interactive progress bar illustrating the playback status of the selected track.

Creating A Simple Music Streaming APp

I assume you already have a new React Native project created. If not, read the official Expo documentation.

To begin, start the installation process by adding the React Native Track Player library:

yarn add react-native-track-player

Next, we’ll proceed by installing the progress bar package. For this scenario, we’ve opted for @miblanchard/react-native-slider because of the extensive functionality and easy styling:

yarn add @miblanchard/react-native-slider

Add Service

Next, let’s incorporate the playback service.

It’s crucial to register the playback service immediately after registering the primary React Native application component, typically found in the index.js file located in the project’s root directory:

IMPORTANT NOTE: The configuration and components will be stored in the src directory. If you don’t have one, create it or do it according to your own convention. I will add the paths to the files I used above the code.

To enable background mode functionality in RN Track Player, we need to configure the player to sustain audio playback even when the application is in the background.

Create RNTP-service.js file to manage this configuration.

src/setup/RNTP-service.js

import TrackPlayer, { Event } from 'react-native-track-player'

export const RNTPService = async () => {
 TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play())
 TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause())
}

Then, in the project root, create an index.js file and import the service and App there.

index.js

import { registerRootComponent } from 'expo'
import TrackPlayer from 'react-native-track-player'

import { RNTPService } from './src/setup/rntp-service'

import App from './App'

registerRootComponent(App)

TrackPlayer.registerPlaybackService(() => RNTPService)

Then, we need to set up the player. In App.js file add setupPlayer.

App.js

import { SafeAreaView, StyleSheet, Text, View } from 'react-native'
import { useEffect } from 'react'
import TrackPlayer, {
 AppKilledPlaybackBehavior,
 Capability,
} from 'react-native-track-player'

export default function App() {
 useEffect(() => {
   const setupPlayer = async () => {
     await TrackPlayer.setupPlayer()

     await TrackPlayer.updateOptions({
       android: {
         appKilledPlaybackBehavior:
           AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
         alwaysPauseOnInterruption: true,
       },
       capabilities: [
         Capability.Play,
         Capability.Pause,
         Capability.SkipToNext,
         Capability.SkipToPrevious,
         Capability.SeekTo,
       ],
       compactCapabilities: [Capability.Play, Capability.Pause],
       progressUpdateEventInterval: 1,
     })
   }

   setupPlayer()
 }, [])

 return (
   <View style={styles.container}>
     <SafeAreaView />
     <Text style={styles.header}>MUSIC APP</Text>
   </View>
 )
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   paddingHorizontal: 16,
   backgroundColor: '#f53340',
 },
 header: {
   fontSize: 28,
   fontWeight: '700',
   textAlign: 'center',
   color: '#FFF',
   marginTop: 20,
   marginBottom: 48,
 },
})

Once you’ve completed these steps, you’ll have the groundwork laid for a fully functional music player.

Add Player Playlist

Before creating the first component, create an array of songs that the music player will use.

For each song, ensure to include a URL pointing to the audio file. It could be either a file path or a direct URL.

App.js

export const tracks = [
  {
    id: 1,
    url: YOUR_URL,
    title: '01. Track 1 sample',
    playlistName: 'Playlist sample',
    playlistId: 1,
  },
  {
    id: 2,
    url: YOUR_URL,    
    title: '02. Track 2 sample',
    playlistName: 'Playlist sample',
    playlistId: 1,
  },
  {
    id: 3,
    url: YOUR_URL,    
    title: '03. Track 3 sample',
    playlistName: 'Playlist sample',
    playlistId: 1,
  },
  {
    id: 4,
    url: YOUR_URL,    
    title: '04. Track 4 sample',
    playlistName: 'Playlist sample',
    playlistId: 1,
  },
  {
    id: 5,
    url: YOUR_URL,    
    title: '05. Track 5 sample',
    playlistName: 'Playlist sample',
    playlistId: 1,
  },
]

Create Track List

In the components directory, the initial addition is the TrackList component. This component serves as a clickable list of songs. Upon selecting a song, it activates the track and generates the music queue.

Pay special attention to the PlaybackActiveTrackChanged event and the onTrackPress function.

App.js

import { FlatList, Pressable, StyleSheet, View, Text } from 'react-native'
import TrackPlayer, {
 Event,
 useTrackPlayerEvents,
} from 'react-native-track-player'
import { useState } from 'react'

const TrackList = ({ items }) => {
 const [activeTrackIndex, setActiveTrackIndex] = useState(0)

 useTrackPlayerEvents([Event.PlaybackActiveTrackChanged], async (event) => {
   if (event.index === undefined) {
     setActiveTrackIndex(0)
     return
   }

   if (
     event.type === Event.PlaybackActiveTrackChanged &&
     event.index != null
   ) {
     const activeTrackItem = await TrackPlayer.getActiveTrack()

     if (!activeTrackItem) {
       return
     }

     setActiveTrackIndex(activeTrackItem.id)
   }
 })

 useTrackPlayerEvents([Event.PlaybackQueueEnded], async () => {
   const repeatMode = await TrackPlayer.getRepeatMode()
   TrackPlayer.seekTo(0)

   if (repeatMode === 0) {
     await TrackPlayer.pause()
   } else {
     await TrackPlayer.play()
   }
 })

 const onTrackPress = async (id) => {
   const currentTrackIndex = items.findIndex((item) => item.id === id)
   const trackPlayerQueue = await TrackPlayer.getQueue()
   const sameTrackFromQueue = trackPlayerQueue[currentTrackIndex]
   const currentTrack = items[currentTrackIndex]

   if (currentTrack.id !== sameTrackFromQueue?.id) {
     const newQueue = items.map((item) => ({
       id: item.id,
       url: item.url,
       title: item.title,
       headers: {
         playlist: item.playlistName,
       },
       playlistId: item.playlistId,
     }))

     await TrackPlayer.reset()
     await TrackPlayer.add(newQueue[currentTrackIndex])
     await TrackPlayer.add(newQueue)
     await TrackPlayer.skip(currentTrackIndex + 1)
     await TrackPlayer.play()
     await TrackPlayer.remove(0)
   } else {
     await TrackPlayer.skip(currentTrackIndex)
     await TrackPlayer.play()
   }
 }

 return (
   <View style={styles.container}>
     <FlatList
       data={items}
       renderItem={({
         item: { id, url, title, playlistName, playlistId },
       }) => {
         const isActiveTrack = activeTrackIndex === id

         return (
           <View
             key={id}
             style={[styles.listItem, isActiveTrack && styles.listItemActive]}
           >
             <Pressable
               onPress={() =>
                 onTrackPress(id)
               }
             >
               <Text
                 style={[styles.title, isActiveTrack && styles.textActive]}
               >
                 {title}
               </Text>
               <Text
                 style={[
                   styles.description,
                   isActiveTrack && styles.textActive,
                 ]}
               >
                 {playlistName}
               </Text>
             </Pressable>
           </View>
         )
       }}
       alwaysBounceVertical={false}
       keyExtractor={({ id }) => id.toString()}
     />
   </View>
 )
}

export default TrackList

const styles = StyleSheet.create({
 container: {
   flex: 1,
 },
 listItem: {
   paddingVertical: 4,
   backgroundColor: '#E21515',
   marginBottom: 8,
   borderRadius: 8,
   paddingHorizontal: 8,
   paddingVertical: 12,
 },
 listItemActive: {
   backgroundColor: '#FFF',
 },
 header: {
   marginBottom: 8,
   color: '#FFF',
   fontWeight: '700',
 },
 title: {
   fontSize: 14,
   color: '#FFF',
 },
 description: {
   fontSize: 12,
   color: '#FFF',
 },
 textActive: {
   color: '#E21515',
   fontWeight: '700',
 },
})

Create Player

The final element you need is the component called player. This component will include the following:

Current song display
Song timer
Clickable progress bar (utilizing the @miblanchard/react-native-slider package)
Play/pause button functionality

import { StyleSheet, View, Text, Pressable } from 'react-native'
import { Slider } from '@miblanchard/react-native-slider'
import TrackPlayer, {
 useProgress,
 usePlaybackState,
 State,
 Event,
 useTrackPlayerEvents,
} from 'react-native-track-player'
import { Dimensions } from 'react-native'
import { useCallback, useState, useEffect } from 'react'

const AudioPlayer = () => {
 const { position, duration } = useProgress(100)
 const { state: playbackState } = usePlaybackState()

 const [isPlaying, setIsPlaying] = useState(playbackState === State.Playing)
 const [activeTrackData, setActiveTrackData] = useState()
 const [isPlayButtonDisabled, setIsPlayButtonDisabled] = useState(true)

 // Util for time format
 const formatTime = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60)
     .toString()
     .padStart(1, '0')
   const seconds = (Math.trunc(timeInSeconds) % 60).toString().padStart(2, '0')

   return `${minutes}:${seconds}`
 }

 const play = useCallback(async () => {
   await TrackPlayer.play()
   setIsPlayButtonDisabled(false)
 }, [])

 const pause = useCallback(async () => {
   await TrackPlayer.pause()
 }, [])

 const trackTimeProgress = formatTime(position)
 const trackTimeLeft = formatTime(duration - position)

 useEffect(() => {
   if (playbackState === State.Playing && !isPlaying) {
     setIsPlaying(true)
   }

   if (
     playbackState === State.Paused ||
     (playbackState === State.Stopped && isPlaying)
   ) {
     setIsPlaying(false)
   }
 }, [isPlaying, playbackState])

 useTrackPlayerEvents([Event.PlaybackActiveTrackChanged], async (event) => {
   if (
     event.type === Event.PlaybackActiveTrackChanged &&
     event.index != null
   ) {
     const activeTrackItem = await TrackPlayer.getActiveTrack()

     if (!activeTrackItem) {
       return
     }

     setIsPlayButtonDisabled(false)

     setActiveTrackData({
       title: activeTrackItem.title,
       playlist: activeTrackItem.headers.playlist,
     })
   }
 })

 return (
   <View style={styles.container}>
     {activeTrackData && (
       <View style={styles.activeTrack}>
         <Text style={styles.activeTrackTitle}>{activeTrackData.title}</Text>
         <Text style={styles.activeTrackDescription}>
           {activeTrackData.playlist}
         </Text>
       </View>
     )}
     <Slider
       style={styles.progressBar}
       trackStyle={{
         height: 6,
         width: Dimensions.get('window').width - 32,
       }}
       thumbTouchSize={{ width: 4, height: 4 }}
       animationType="timing"
       trackClickable
       value={position}
       minimumValue={0}
       maximumValue={duration}
       thumbTintColor={'#fff'}
       minimumTrackTintColor={'#fff'}
       maximumTrackTintColor={'#fff'}
       onSlidingComplete={async (value) => {
         TrackPlayer.seekTo(Number(value))
       }}
     />
     <Text style={[styles.text, styles.timer]}>
       {trackTimeProgress} / {trackTimeLeft}
     </Text>
     <View style={styles.buttons}>
       <Pressable
         disabled={isPlayButtonDisabled}
         style={[styles.button, isPlayButtonDisabled && styles.buttonDisabled]}
         onPress={isPlaying ? pause : play}
       >
         <Text style={styles.buttonText}>{isPlaying ? 'PAUSE' : 'PLAY'}</Text>
       </Pressable>
     </View>
   </View>
 )
}

export default AudioPlayer

const styles = StyleSheet.create({
 container: {
   justifyContent: 'flex-end',
   width: '100%',
   backgroundColor: '#f53340',
   paddingVertical: 32,
 },
 activeTrack: {
   marginBottom: 32,
 },
 activeTrackTitle: {
   fontSize: 28,
   fontWeight: '700',
   color: '#fff',
 },
 activeTrackDescription: { fontSize: 20, fontWeight: '700', color: '#fff' },
 buttons: {
   flexDirection: 'row',
   justifyContent: 'flex-end',
   alignItems: 'flex-end',
   marginBottom: 12,
   width: '100%',
 },
 button: {
   backgroundColor: '#fff',
   paddingVertical: 8,
   paddingHorizontal: 16,
   marginLeft: 16,
   borderRadius: 8,
 },
 buttonText: {
   fontWeight: '700',
   textAlign: 'center',
   color: '#f53340',
   fontSize: 18,
 },
 buttonDisabled: {
   opacity: 0,
 },
 progressBar: {
   alignItems: 'center',
   flex: 1,
   width: '100%',
 },
 timer: {
   fontSize: 18,
   marginTop: 8,
   marginBottom: 20,
   fontWeight: '700',
 },
 text: {
   color: '#FFF',
 },
})

Getting it all together

Now that we have the components ready, all that remains is to put everything together.

In the App.js file we import the list and player components. In addition to the components, we need to import a const containing a list of songs.

App.js

import AudioPlayer from './src/components/AudioPlayer'
import TrackList from './src/components/TrackList'

import { tracks } from './src/consts/index'

Next we add the components and pass the tracks array as props to the list component.

 return (
   <View style={styles.container}>
     <SafeAreaView />
     <Text style={styles.header}>MUSIC APP</Text>
     <TrackList items={tracks} />
     <AudioPlayer />
   </View>
 )

And now you have your own music streaming app!

Play around with the player’s functionalities and then add additional functions such as scrolling to the next/previous song, volume control or support for more than one playlist.

Summary

In this short tutorial, you created a simple music player. As you have noticed, the functions and events provided by React Native Track Player make our work much easier, so we can focus more on how the functionality should work rather than how to create it. And this is only a fraction of what this music library provides us.

After analysing the API, you will realize that you can create a React Native track player that supports several playlists with full control over the song being played. Offline support will allow you to download a few tracks to your device and play them offline.

Of course, you can always use the expertise of a mobile app development company to help you build a music streaming app that will work anywhere and that you will be able to monetize.

Need someone to build a music streaming app for you? Use our help.

FAQ

Is React Native good for building apps like Spotify or Apple Music?

Yes, React Native is a solid choice for building apps similar to Spotify or Apple Music. It supports cross-platform development, integrates with audio libraries like React Native Track Player, and allows you to implement features like streaming, playlists, and background playback on both iOS and Android.

What is the best library to build a music streaming app in React Native?

The most widely recommended library is React Native Track Player. It offers cross-platform support, background playback, lock-screen controls, and now includes features like adaptive streaming (HLS, DASH) and caching for offline use. It’s actively maintained and well-suited for building production-grade music apps.

Does React Native Track Player support offline playback?

Yes, React Native Track Player supports offline playback through its caching feature. Developers can allow users to download tracks for later listening, making it possible to enjoy music even without an internet connection.

How do I add background audio playback in React Native?

Background audio playback can be added using React Native Track Player. After installing and configuring the library, you register a service that keeps playback running when the app is minimized. This setup enables media controls on the lock screen, notification area, and external devices like headphones.

Sources

What is Next.js Framework and Why Should You Use It in 2025?

Chris Lojniewski — Mon, 01 Sep 2025 06:45:13 +0000

Why Choose Web Development with Next.js?

In 2025, we have plenty of tools to choose from for React application development. Small startups and global brands like Spotify and Nike, more teams are choosing Next.js to power their web apps. But what is Next.js, and what makes it stand out?

Since it’s a JavaScript framework, Next.js supports building performant JS web apps, providing developers a familiar foundation. To show why it’s a framework worth considering for your project, I’ll discuss its core features and explore the most common use cases.

Before we do that, however, we should start with the basics.

What is Next.js and Why Is It Used?

Developed by Vercel, Next.js is built on top of React. It’s a full-stack framework, meaning it can handle both frontend and backend development tasks in a single project. It has become one of the most recommended frameworks for React-based web applications.

The 2025 Stack Overflow survey listed it as the fourth most popular among web frameworks and technologies.

Source: Stack Overflow 2025 Developer Survey

Versatile features, like server-side rendering (SSR), incremental static regeneration (ISR), and integrated API routes, offer flexibility for React developers and NextJS teams.

How Next.js Works

Next.js provides a set of features (like SSR, SSG, file-based routing, and API routes) that make it easier and faster to build modern web applications with React. You can read more about it in the official Next.js docs.

What’s New in Next.js 15

The Next.js 15 introduced a series of transformative updates that reshaped both dev experience and production performance. Across its minor releases, the framework refined React 19 support, redefined caching behavior, stabilized experimental features, and began preparing for version 16.

React 19 Integration: Started with RC support in 15.0, reaching full stable support in both App and Pages Router by 15.1. It improved hydration error handling and introduced the experimental React Compiler.
New API and Caching Semantics: Request APIs (cookies, headers, params, searchParams) became asynchronous in 15.0, requiring codemod-assisted migration. Caching behavior changed as well. GET route handlers and client router cache are now uncached by default, making caching an explicit choice. The after() API moved from experimental (15.0) to stable (15.1), allowing tasks to run after responses.
Developer Experience: Error handling was improved by redesigning error UI and stack traces in 15.2, highlighting actual error sources and integrating React’s owner stacks. Improved debugging, new Auth utilities, navigation hooks, and better observability further elevated the DevEx in NextJS
Turbopack Maturity: Turbopack builds have achieved full compatibility (8,298 tests passed) and now power production sites like vercel.com.

Version 15 also includes plenty of experimental features:

Streaming Metadata (15.2): Enables faster initial UI rendering while metadata streams in.
React View Transitions API (15.2): Smooth page-to-page animations under a feature flag.
Node.js Middleware Runtime: Experimental in 15.2, stable by 15.5
Rspack Support (15.3): A Webpack-compatible alternative build system via plugin.
CacheComponents (15.4 preview of Next.js 16): A unified caching layer that brings together existing cache features, use cache, and partial prerendering.

Next.js 15 feels like a turning point. React 19 is fully supported, caching became more predictable, and Turbopack achieved full maturiy. For us, that means less time fighting performance bottlenecks and more confidence in how apps behave at scale. Next.js is a stable tool, that still pushes innovation and creativity.

Rafal Dabrowski, Next.js Expert at Pagepro

Is Next.js a perfect fit for your project? Contact Us

Features of Next.js

NextJS is currently one of the most popular frameworks for web applications. Its advanced features made it the favorite of developers and companies alike.

Hybrid Rendering

The ability to mix Server-Side Rendering and Static Site Generation, with Client-Side Rendering (CSR) within a single application is a major perk. Developers can choose whether to pre-render content at build time or handle it at runtime, optimizing performance, SEO, and user experience. For example, using SSG for blog posts, SSR for dynamic user dashboards, and CSR for interactive components.

Serverless and Edge Functions

The framework supports serverless deployment and edge functions, allowing devs to run code closer to users for faster response times, and limiting the need for complex server management.

Incremental Static Regeneration (ISR)

ISR allows static pages to be updated without a full rebuild, making it possible to serve up-to-date content while maintaining the speed of static generation.

File-Based Routing

Next.js’s file-based routing makes it easy to create routes by simply adding files to the pages directory. There’s no need to configure routing by hand, which reduces boilerplate code and improves maintenance.

API Routes

The ability to create backend API endpoints directly within a NextJS project supports full-stack development without the need for separate server infrastructure. You can build complex applications much easier, thanks to simplified data fetching, processing, and handling.

Built-In Image Optimization

The Image component automatically optimizes images, resizing them and serving modern formats, which boosts page load. This feature saves developers from handling image optimization and unifies UX across different devices.

Get the CTO’s Ultimate Guide to Next.js

Discover the full potential of Next.js. Gain insights into advanced methodologies and real-world applications tailored for technology pioneers.

User Experience and Search Engine Optimization in Next.js

This framework provides features that impact both UX and SEO. Its support for SSG and SSR improves page load times, an important factor for user retention and search engine rankings.

Built-in functions like image optimization and lazy loading improve performance across devices, contributing to better UXs and reduced bounce rates.

Moreover, the pre-rendered content from SSR improves visibility on search engines, potentially attracting organic traffic. These capabilities allow developers to build responsive, efficient, and search-friendly applications.

What is Next.js Used For?

Next.js can be used to build many different types of projects, such as:

Complex Web Applications
Web Platforms
Multi-Market Solutions
Advanced eCommerce and Retail Platforms
SaaS Products
Interactive User Interfaces

Its capability to manage high-traffic websites has made Next.js a trusted choice for some of the largest companies on the market, so here are 3 examples of web applications built in Next.js:

Spotify

Source: Spotify

A top music streaming service in the world, Spotify allows fans to enjoy their favourite artists anywhere they go.

Proofed

Source: Proofed

A professional editing and proofreading service helping individuals and businesses improve their written content. Their team includes experts who can provide quick turnaround times while maintaining high-quality standards.

READ CASE STUDY

Claude AI

Source: Claude AI

An AI model by Anthropic, Claude generates text for tasks like answering questions and engaging in conversations. It’s one of the AI models prioritising safety and ethics.

Nike

Source: Nike

Known for its iconic products and innovative designs, Nike is a global leader in sportswear. The company designs, manufactures, and markets athletic footwear, apparel, and accessories appreciated by athletes from all walks of life and levels of skill.

Why We Chose Next.js for Our Web Page

The decision to use Next.js for our website was both strategic and practical. Search engine optimization was an important consideration since we rely on organic traffic and invest heavily in SEO. This framework provides the technical foundation to support those efforts.

Page speed is another priority. The framework’s ability to deliver fast loading times enhances the UX while reinforcing our SEO strategy. In terms of content management, using a modern decoupled architecture with Next.js offers us free reign over the frontend, letting our marketing team integrate tools like Storybook for dynamic content management.

And let’s not forget our developers. They appreciate the framework for its efficiency, scalability, and active community support.

Pros and Cons of Next.js

Next.js is a great framework for building websites and apps. While it boasts many powerful features, it does have a few disadvantages. Have a look at the Next.js pros and cons:

Advantages of Next.js for Business

Scalability and Security

Since this framework is built to handle complex, high-traffic websites and applications, it’s great for businesses that require scalable and highly customizable solutions. It also addresses key security concerns, such as authentication and data validation, ensuring user trust and data integrity.

Performance Optimization

Next.js boosts performance with features like lazy loading, image optimization, automatic code splitting, and route prefetching, ensuring faster load times and a better UX.

One of our clients, an e-learning platform, migrated from an outdated Drupal tech stack to Next.js and Sanity with our help. This transition resulted in significant performance improvements and enhanced security.

Learn Squared - Boosting the Performance of e-Learning Platform with Next.js

READ CASE STUDY

Faster Time to Market

The framework speeds up development with pre-built components. It’s ideal for building MVPs quickly and efficiently, reducing time and cost to market.

Improved User Experience and Increased Traffic

This React framework allows businesses to create customized, fast, and lightweight static sites that align with their design vision and goals. As these sites are SEO-friendly, they improve search rankings and drive organic traffic.

Omnichannel Presence

Next.js also ensures accessibility across all devices, resulting in an omnichannel presence. Fast load times and an enhanced UX contribute to higher conversion rates, as satisfied users are more likely to return and engage.

The universal compatibility of Next.js ensures modern web solutions function flawlessly across all devices, broadening customer reach and accessibility. We’ve seen improvements in conversion rates and performance since adopting Next.js

Jakub Dakowicz, CTO at Pagepro

Cost Efficiency

Hosting on Vercel not only helps your apps and websites keep stellar performance but also lowers costs. It’s all due to the integration between Next.js and the hosting environment.

AI Integration

Next.js allows devs to incorporate advanced AI technologies into their applications through built-in support for the Vercel AI SDK.

Unified Full-Stack Development

This technology offers comprehensive full-stack capabilities, streamlining development by building entire applications with a single, unified framework. It reduces the need for multiple tools, which improves efficiency and developer experience.

Rich Ecosystem

This framework benefits from a strong ecosystem, supported by companies like Vercel and Meta, with a large, active community. Developers can easily access resources, plugins, and a vast talent pool, making it easier to recruit and share knowledge.

Next.js on G2

What Are the Downsides of Next.js?

While very versatile and performance-friendly, building with NextJS comes with a few roadblocks. Here are some of the potential issues to consider before implementing it in your tech stack.

Development and Management

The flexibility offered by Next has its cost – continuous management. To make all desired changes properly, you will need a dedicated person, familiar with the system, to manage it. The good news is that this person doesn’t have to be a developer!

Ongoing Cost

Since Next.js does not provide many built-in front pages, you have to create one yourself. The frontend will require changes or updates from time to time, meaning you’ll have to hire a dedicated dev to get the job done.

No Built-In State Management

Like many frameworks, it does not include built-in state management. Developers can integrate popular solutions like Redux, MobX, or React’s Context API to handle state the way they want.

Get Started with NextJS Framework

Next.js is a versatile framework that balances flexibility and scalability. Its features make the framework ideal for a variety of projects, from simple static sites to complex web applications.

It simplifies development with easy setup, great performance optimizations, like React compatibility, and integrated tools, all while ensuring excellent SEO benefits.

Next.js applications and websites are a great investment into future of your project. Established companies like Spotify, Anthropic, Nike, and Proofed have leveraged NextJS’ capabilities, proving its value for developers and businesses both.

Want to start a new project with Next.js? Contact Us

FAQ

What is Next.js?

Next.js is a React framework that adds features like server-side rendering, static site generation, and file-based routing. It helps developers build fast, SEO-friendly, and scalable applications.

Is Next.js Better than React?

React is a library for building UI components, while Next.js is a framework built on top of it. Next.js is often better for production apps because it includes routing, rendering options, and performance optimizations out of the box.

Our article Next.js vs React talks more about choosing between the two solutions.

When Should Next.js Be Used?

Next.js is best for projects where speed, scalability, and SEO matter. It’s also worth considering for e-commerce, SaaS products, content-heavy sites, and dashboards.

Is Next.js a Coding Language?

No, Next.js is not a coding language. It’s a framework built on top of JavaScript (and optionally TypeScript). You still write code in JavaScript/TypeScript, but Next.js provides structure and performance features.

Is Next.js Frontend or Backend?

Next.js is mainly a frontend framework, but it also supports backend tasks like API routes and server-side rendering. It can function like a full-stack framework in many projects.

Does Next.js Require a Backend?

Not always. You can build static sites in Next.js without a backend, or add one if your app needs dynamic data, authentication, or database connections.

Is Next.js Worth Learning in 2025?

Yes, Next.js remains one of the most popular React frameworks, widely used by startups and enterprises. Its strong community, frequent updates, and demand in the job market make it a valuable asset in 2025.

Sources

Headless CMS Guide: Sanity vs Contentful

Chris Lojniewski — Thu, 14 Aug 2025 12:30:00 +0000

How to Pick the Right CMS in 2025?

When it comes to content solutions, two of the most popular picks in 2025 are Sanity vs Contentful. Both are headless, API-driven platforms, but they differ in flexibility, pricing, and how much control they give you.

Picking the right CMS solution starts with knowing your team’s needs. There is a difference in how developers want to work and the kind of editing experience content teams expect. At the same time, you have to consider how the future platform might scale with your website, if it’s within the budget.. The list goes on.

For those trying to choose between Contentful and Sanity, we’ve prepared a quick comparison of both. Let’s find out which is the better choice for you.

Features of Contentful vs Sanity

Feature	Sanity	Contentful
Type	Content Operating System offering schema-as-code flexibility and real-time content collaboration.	A headless CMS with a structured, UI-first approach.
G2 Rating	4.7/5	4.2/5
Developer Experience	Sequential editorial workflows with a clear structure.	Models created via UI or migration scripts. Less flexibility but faster setup for non-technical teams.
Collaborative Editing	Real-time edits and live updates.	Studio is fully customizable via React and the structure builder.
Querying & API	GROQ (proprietary and highly flexible) plus REST and GraphQL.	Supports REST and GraphQL.
Customization & UI	Studio is fully customizable via React and structure builder.	Limited UI customization. Offers an App Framework.
Performance	Optimized for low-latency, real-time updates. Uses distributed Content Lake, with optional CDN layer.	Contentful offers enterprise-grade performance with global CDN, 99.99% uptime SLA, handles massive API volumes.
Ecosystem	Open-source ecosystem with strong developer engagement.	Marketplace with a large partner network and extensive integrations.
Pricing Model	Sanity offers usage-based pricing, flexible for smaller projects.	Fixed-tier pricing that may become costly with scale.
Best For	Developer-led teams seeking flexibility, real-time content workflows, and custom UIs.	Teams needing structure, enterprise governance, and predictable scaling.
Use Cases	PUMA, Morning Brew, Cloudflare	KFC, BMW, Notion

Have questions about Headless CMS Solutions? Ask our experts.

Sanity: Content Operating System

As a Content Operating System, Sanity gives developers complete control over how content is structured, edited, and delivered. Unlike CMSs with rigid, UI-driven models, Sanity stores content as structured data defined entirely in code. The content model can evolve alongside the product without fighting platform limitations, and it works seamlessly with frontend solutions like Next.js.

Many frontend developers like that Sanity’s schema-as-code fits right into their version control workflow, so content model changes are tracked and reviewed just like any other part of the codebase.

Rafał Dąbrowski, Pagepro Developer

Sanity is a leader in the headless CMS industry. It’s aimed at teams that want real-time collaboration and the ability to tailor the editing environment to their needs.

Sanity Core Features

Schema-as-code, which lets you define your entire content structure in JavaScript or TypeScript.
Sanity Studio, a highly customizable, open-source editing environment built with React.
Real-time editing for multiple users. They can edit the same document simultaneously, with changes synced instantly.
Content Lake, a cloud-hosted datastore that delivers content updates in milliseconds.
GROQ query language with a powerful, flexible syntax for fetching exactly the data you need.
Build or install plugins for workflows, integrations, and custom field types.
Built-in image CDN with automatic transformations and optimization.

Sanity on G2

The Pros of Sanity

Flexibility

Because the schema is defined in code, developers can model and manage content exactly as they need it without working around a UI’s constraints.

Real-Time Collaboration

Editors see changes instantly, making it easier to work without overwriting.

Fully Customizable Studio

You can adapt the editing interface to match the project’s needs and add custom input components.

Version Control for Content Models

Since schemas live in your codebase, they can be tracked, reviewed, and deployed like any other part of the application.

Performance

Content Lake delivers low-latency data and supports live updates to the front end.

Plugin Ecosystem

Growing library of official and community plugins for analytics, localization, e-commerce, and workflow enhancements.

Generous Free Tier

Suitable for prototypes or small sites before scaling up to paid usage.

The Cons of Sanity

Steeper Setup for Non-Developers

Without a developer to define schemas, the content platform has no ready-to-use structure.

Learning Curve for GROQ

While powerful, Sanity’s proprietary query language isn’t as widely known as GraphQL, so teams need time to get up to speed.

Usage-Based Pricing

Sanity costs can spike if you have high traffic, many API requests, or large amounts of stored data.

Fewer Turnkey Integrations

While the plugin ecosystem is growing, it’s smaller than Contentful’s established marketplace.

What is Sanity.io Used For?

Source: Sanity

Sanity is widely used for projects where content complexity and flexibility are essential:

Multi-platform content delivery to push content to websites, apps, and in-store displays from a single source.
Custom editorial workflows and matching a brand’s content process.
Sites that need collaborative publishing, live dashboards, or apps where content changes need to appear instantly.
Design- and content-rich sites that need a CMS to adapt to unique layouts or structures.

Well-known brands like PUMA, Morning Brew and Cloudflare have used Sanity for projects that require both creative freedom and scalable performance.

Sanity Development for UK’s Top Insurance Company - READ CASE STUDY

Contentful: Headless CMS

Contentful is a cloud-native, API-first headless CMS, sometimes referred to as a “composable content platform”. It decouples content storage from presentation, offering content as JSON data via REST or GraphQL APIs.

This architecture makes it flexible and channel-agnostic, ideal for modern omnichannel publishing.

Contentful Core Features

API-first architecture with REST and GraphQL endpoints for content delivery.
Structured content modelling for defining content types, fields, and relationships.
Role-based permissions for editorial governance.
Content versioning with history and rollback.
App Framework and Marketplace for integrations with analytics, e-commerce, translation, and marketing tools.
Global CDN for fast content delivery worldwide.

Contentful on G2

The Pros of Contentful

Contentful has become a go-to choice for many enterprises because it blends t*he stability of a mature platform with the flexibility of a headless setup*. Its features are built to support large teams and high-traffic projects.

Reliability

Contentful is known for uptime and stability, backed by SLAs and global CDN infrastructure.

Predictable Workflows

A structured, UI-driven content model is easy for non-technical editors and marketers to follow, reducing errors in large teams.

Integrated Ecosystem

The App Marketplace and strong partner network make it straightforward to connect with third-party services.

Omnichannel

The API-first approach lets you push the same content to multiple platforms easily.

The Cons of Contentful

Contentful is a great option if you’re looking for reliability and governance, but it has some significant trade-offs:

Rigid Content Modelling

The structured approach is great for governance but can feel inflexible when requirements change. For example, introducing a new nested relationship or restructuring content types often requires multiple migration scripts and extensive testing.

Limited Previews

Out of the box, Contentful doesn’t offer a true real-time preview. Editors may need to publish or set up complex preview environments to see how changes look, which slows feedback loops.

Workflow Gaps

There’s no built-in real-time collaborative editing (like Google Docs or Sanity’s live editing). Two people editing the same entry risk overwriting each other’s changes.

API Rate Limits

Build processes, especially in static site generators or large migrations, can hit rate limits. On busy projects, this can cause delays unless you move to a higher-cost plan.

High Scaling Costs

Contentful pricing is tiered by users, locales, and content types. A project might start affordably but become expensive as you add editorial staff, expand into multiple regions, or store more entries.

Learning Curve

While editors can pick up the UI quickly, developers must learn Contentful’s specific APIs, content modelling patterns, and migration tooling, which adds onboarding time.

Which Companies Use Contentful?

Source: Contentful

Contentful is often chosen for projects where structured governance, scalability, and predictable workflows are more important than extreme flexibility. Examples include:

Enterprise-scale websites that need strict content structures and localization.
Multi-channel publishing to deliver consistent content across websites, mobile apps, kiosks, and other digital touchpoints.
Marketing and campaign sites where content needs to be updated quickly without involving developers.
Global brand platforms maintain brand consistency across regions with role-based permissions and approval workflows.

High-profile organisations, like KFC, BMW, and Notion, rely on Contentful for enterprise-scale and multi-platform content delivery. However, many teams are migrating from Contentful due to its high costs and rigid architecture.

What is the Difference Between Contentful and Sanity?

Both Contentful and Sanity are API-first, headless platforms. However, they approach content management very differently.

Contentful takes a UI-first, structured approach. You model content types within its dashboard, define fields through the interface, and let non-technical editors work within a predictable, governed environment. This way, onboarding is much easier for large teams and helps to keep content consistent across regions and channels.

Sanity, on the other hand, is schema-as-code from the ground up. Content models live in the codebase, so developers have complete control over the structure. Studio editing environment in Sanity is open-source and fully configurable. The real-time collaboration feature means multiple editors can work on the same content simultaneously without conflicts.

The result is that Contentful often appeals to enterprises that need predictability and a ready-made editorial interface. Sanity is well-liked by developer and editorial teams looking for flexibility.

Sanity vs Contentful Pricing

What’s the Cost of Sanity?

Sanity Pricing as of August 2025

Paid Plans in Sanity

Growth: $15/seat/month

Up to 50 seats
5 roles
Private/public datasets
Comments, tasks, and content releases
AI Assist features
Higher limits for API requests, bandwidth, and assets (overages billed separately)

Enterprise: Custom pricing

Unlimited seats
Advanced access control and governance
SSO, SLAs, dedicated support, onboarding, and training
Media library add-ons and extended retention options

Is Sanity Free?

Yes, Sanity has a free tier. It includes full access to the Studio, schema-as-code modeling, and real-time features:

Up to 20 user seats
2 roles
2 datasets (public)
Unlimited content types/locales
Real-time collaboration
Basic compute, API, and asset limits

It’s generous enough for prototypes, internal tools, or small sites before upgrading to Growth or Enterprise.

How Much Does Contentful Cost?

Contentful Pricing as of August 2025

Contentful uses a tiered pricing model with clear limits at each level.

Paid Tiers in Contentful

Lite: $300/Month

20 users, 3 roles, 3 locales
1M API calls/month
100 GB/month CDN bandwidth
Comments & task management
Scheduled publishing
Live collaboration
1 Starter Space (with option to add 1 Lite Space)

Premium: Custom pricing

Everything in Lite, and a few more features:

Custom users, roles, and locales
Unlimited API calls/month
Custom CDN bandwidth
Enhanced governance, compliance, and security
Up to 99.99% uptime SLA
Dedicated customer success and 24/7 support
Unlimited Spaces and advanced features (e.g., Personalization, Studio, AI Actions)

Is There a Free Version of Contentful?

Yes. Contentful’s free plan is suitable for learning, prototyping, or very small sites. Most production projects with multiple locales, higher traffic, or more complex workflows will need to move to Lite or Premium. It includes:

10 users, 2 roles, 2 locales
100K API calls/month
50 GB/month CDN bandwidth
Structured content, developer tools, and editorial experience
1 Starter Space

Pricing Comparison Table

Plan	Sanity	Contentful
Free	– 20 seats – 2 roles – 2 public datasets – Unlimited content types/locales – Real-time collaboration	– 10 users – 2 roles – 2 locales100K API calls/mo – 50 GB CDN – 1 Starter Space
Mid-Tier	– $15/seat/mo – Up to 50 seats – 5 roles – Private/public datasets – Comments – Tasks – Content releases – AI Assist – Usage-based overages	– $300/mo – 20 users – 3 roles – 3 locales – 1M API calls/mo – 100 GB CDN – Comments – Scheduled publishing – Live collaboration
Enterprise	– Custom pricing – Unlimited seats – Advanced access control SSO – SLAs – Dedicated onboarding/support – Media library add-ons	– Custom pricing – Unlimited API calls – Custom bandwidth – Unlimited Spaces – Advanced governance – 24/7 support – Up to 99.99% SLA
Pricing Model	Seat-based pricing + usage-based add-ons	Fixed-tier pricing with defined limits
Best For	Flexible scaling, custom workflows, collaborative editing	Predictable budgets, strict governance, enterprise-scale delivery

Pricing as of August 2025

Sanity vs Contentful: Choosing the Right Option

Both Sanity and Contentful are capable, modern platforms; the better choice comes down to your team’s needs.

Pick Sanity if…

Full control over content structure through schema-as-code is important.
Real-time collaboration between editors is a core requirement.
A fully customizable editing environment is needed to match unique workflows.
Flexible, usage-based pricing is preferred for smaller projects with room to scale.
The content model is complex or expected to change frequently.

Choose Contentful if…

A ready-to-use, structured editorial environment will speed up adoption for non-technical users.
Predictable pricing and defined limits outweigh the need for deep customization.
Large, distributed teams rely on strict governance, roles, and approval workflows.
Enterprise-grade reliability, global content delivery, and strong SLAs are top priorities.
A wide ecosystem of integrations and proven enterprise deployments is essential.

In short, Sanity shines when flexibility, customization, and live collaboration matter most, while Contentful excels in structured governance, predictable workflows, and enterprise scalability.

Did you choose Sanity over Contentful? Our development team can design, customize, and launch a solution tailored to your needs. Learn more about our Sanity development services.

Sanity vs Contetnful FAQ

What Kind of CMS is Contentful?

Contentful is a headless CMS. It stores content in a structured way and delivers it through APIs, allowing developers to use any technology to display that content on websites, apps, or other digital platforms.

Which CMS is Better, Sanity or Contentful?

Sanity is ideal for developer-led projects that need flexibility, real-time collaboration, and a fully customizable editing experience. Contentful works best for larger teams that value a ready-to-use interface, structured governance, and predictable pricing. Both are powerful headless CMS platforms, but the right one for you comes down to workflow preferences, budget, and long-term scalability.

What is a Headless CMS?

A headless CMS separates the content management back end from the front-end presentation. Content is created and stored in the CMS, then delivered via an API to any channel.

Is Sanity a CMS?

Sanity is a Content Operating System. It offers more customization, real-time collaboration, and schema-as-code content modeling than traditional CMS options.

What’s the Difference Between Headless CMS and Content Operating System?

A headless CMS solution focuses on storing and delivering content via APIs. A Content Operating System, like Sanity, does that too but adds deeper customization, real-time collaboration, and the ability to fully control the content model and editing environment.

Is Sanity CMS Open-Source?

Sanity Studio, the editing interface, is open source and can be customized or extended by developers. The hosted Content Lake (where your content is stored and delivered) is not open source.

Why is Contentful So Expensive?

Contentful can become costly because pricing increases with the number of users, locales, API calls, and content spaces. Enterprise plans also include advanced features, SLAs, and dedicated support, which add to the price.

Contentful Migration in 2025: What are the Alternatives?

Chris Lojniewski — Mon, 28 Jul 2025 13:20:25 +0000

Why Teams Are Migrating from Contentful

When one of our clients first approached us about Contentful migration, their dev team had just spent weeks untangling a React component spanning over 500 lines. Why? To get rich text to render properly.

That was only one of their problems. Previewing content wasn’t possible without publishing it. Updating the schema meant rewriting GraphQL fragments across 70+ files. To make matters worse, they had already outgrown the 25 content type limit and were paying extra for every new user and environment.

Their story isn’t unique. For many mid-sized teams, Contentful migration is no longer a question of if, but when.

The good news is, if you’re looking for an alternative to Contentful or planning a full CMS migration, you have plenty of choices. Modern content management tools offer clear editorial UX and easy integration with frameworks like Next.js.

To help you pick the best candidate for your CMS migration, we’ve prepared a list of recommendations. All of them were chosen based on our experience and how easy they are to work with.

Why Migrate from Contentful?

Contentful can be a great choice for some teams, but problems begin as they start to grow.

The costs scale with usage: Contentful pricing is based on users, environments, and content types. Teams expanding their size or adding staging layers will quickly see higher monthly expenses.
Content type limits require careful planning: Teams on lower-tier plans may reach the 25 content type cap much earlier than expected. When that happens, they might need to spend extra time reworking models or pay more for an upgraded plan.
Rich text requires custom handling: Contentful stores rich text as structured JSON. It’s a flexible solution, but if you’re using a framework like React or Next.js, you’ll need extensive frontend logic to render it consistently.
Previewing isn’t always easy: Editors working with Contentful often have to publish content before seeing how it appears on the live site. Feedback loops are much slower as a result, and it might introduce more problems during intense publishing cycles.
Frontend and backend are tightly integrated: A mix of GraphQL and rigid content structures can make even small schema changes in Contentful a challenge.

Sounds familiar? If so, a headless CMS migration might be a natural next step for you.

Thinking about Migrating to a Headless CMS? Our Experts Can Help

Choosing a Contentful Alternative

Headless CMS (Content Management System) platforms offer plenty of options, but aren’t a one-size-fits-all solution.

“A headless CMS separates the content layer from the presentation layer. Developers can build flexible frontends using any technology, while content teams manage everything in one centralized backend.”

Jakub Dakowicz, CTO at Pagepro

Migrating to a headless CMS can be a great benefit to the business. According to the State of CMS survey, over 99% of people experienced some kind of benefit after switching to headless solutions.

Source: Stoyblok State of CMS 2024

Each has its own strengths and weaknesses, so before migrating from Contentful, consider what your team might need most.

Usability

Is your CMS easy to master for non-technical users? Can editors preview changes in real time? Some headless CMS platforms focus on developer workflows first, and others offer visual editors and drag-and-drop layouts easier to use for content creators.

Pricing

Know what you’re committing to long-term. Is the pricing model predictable, or will it change with usage like Contentful’s? Open-source options like Strapi let you have full control at the cost of maintenance. Meanwhile, SaaS platforms range from flat-fee to usage-based billing.

Flexibility

Your content structure won’t stay the same. Look for a CMS that makes schema changes easy to implement without breaking the whole site.

Tech Stack Compatibility

Make sure the CMS plays nicely with your frontend setup. If you’re using Next.js, features like incremental static regeneration, flexible previews, and fast API access can make a difference in site speed. And speaking of…

Performance

What will happen when your traffic spikes? Some CMS platforms might enforce rate limits or bandwidth caps. Others offer global edge caching and content delivery optimizations.

Localization and Integrations

Does your site support multiple languages or connects with third-party tools? Choose a CMS that handles localization well and will work well with your tools.

Best Alternatives to Contentful in 2025

Now that you know what to pay attention to, we can move to comparing Contentful alternatives. We’ll start with our favorite.

CMS	Best For	Strengths	Tradeoffs	Localisation
Contentful	Structured enterprise projects, cross-functional teams	Stable platform, GraphQL support, strong integrations	High cost at scale, rigid content modeling, and preview limitations	Built-in, but locale limits apply by plan
Sanity	Dev-led teams, complex models	Schema-as-code, GROQ, fast preview	Dev setup needed, usage pricing	Unlimited locales, API-driven
Storyblok	Visual editing, localization	Visual editor, block-based model	Structure is opinionated	Built-in tools, folder-based
Strapi	Self-hosting, custom backends	Fully customizable, open-source	Maintenance overhead	Plugin-based (i18n), customizable
Prismic	Fast setup, structured sites	Slices, good docs, fast UI	Less flexible for complex models	Locale support, user-friendly UI

Sanity

Best for: Dev-led teams and structured content at scale

Used by: Puma, Morning Brew

A great fit for teams using Next.js or building complex content workflows. Sanity Content Operating System has strong developer control. It comes with schema-as-code, GROQ querying, and excellent support for live previews.

Editors can use real-time collaboration and a customizable Studio interface without hard limits on content types or locales. To make the switch easier, Sanity offers an official Contentful migration plugin that automates schema and content migration in minutes.

Sanity’s initial setup requires a lot of technical involvement early on, but it pays off in long-term flexibility and performance.

You can read more about it in our article, Best Use Cases of Sanity.

Pricing

Sanity’s free plan includes 20 user seats, two datasets, unlimited content types/locales, and live preview. The Growth plan starts at $15 per non-admin seat/month, adding features like content releases, comments, and AI Assist. Enterprise plans offer extras like SSO, audit logs, and SLAs (custom pricing).

What Are The Differences Between Contentful And Sanity?

“We’ve worked with all major headless CMS platforms, and Sanity has the best balance between developer control and editorial usability. For teams migrating from Contentful, it solves a lot of long-standing issues without locking you into rigid pricing or workflows.”

Jakub Dakowicz, Pagepro CTO

Sanity uses a schema-as-code model. Developers can define content structure in JavaScript and version it like any other code. Contentful, meanwhile, relies on a UI-based model, which is easier to get started with but harder to scale.
The GROQ query language used by Sanity gives full control over content fetching. Contentful uses GraphQL and REST, which often requires workarounds for complex queries.
Contentful supports content preview, but often requires more setup and doesn’t reflect changes until after publishing. Sanity, on the other hand, offers real-time collaboration and live preview features from the get-go.
When it comes to pricing, Contentful charges per user, environment, and content type. Sanity charges are based on your usage, like API calls, bandwidth, and data storage.

Storyblok

Best for: Content teams that want visual control

Used by: Oatly, Octopus Energy

Storyblok shines with its visual editor and block-based content model, making it easy for marketers and editors to manage pages without developer input. Built-in localization tools are also a plus. However, the CMS has a more opinionated structure, which may be limiting for custom or deeply nested content models.

Pricing

Storyblok’s free Starter plan includes one user and one space. The Entry plan starts at ~$90/month (billed annually) for five users, one space, a visual editor, and 400 GB of traffic. Additional bandwidth costs apply.

What Are the Differences Between Contentful and Storyblok?

Storyblok is built around a visual editor and block-based content model, making it especially appealing to marketers and content teams. It allows editors to preview and edit pages visually without developer help. Contentful, by contrast, is more structured and developer-oriented. It has a form-based editor and fewer built-in visual controls.
In terms of modeling, Contentful has flexibility in defining content types, but Storyblok’s component-based structure promotes more consistency across pages.
On the technical side, both support modern frameworks like Next.js. Still, Contentfu requires more manual GraphQL work and richer frontend logic. Storyblok has a simpler setup with REST APIs and SDKs for faster integration.
Their pricing differs a lot, since Storyblok is more focused on project tiers and team roles.

Strapi

Best for: Teams that want full control and self-hosting

Used by: Airbus, Tesco

Strapi is open-source and fully customizable, and supports custom backends and APIs. It’s great for developers who want control over every part of the stack. However, with that freedom comes a cost. Ongoing maintenance and hosting responsibilities fall entirely on your team.

Pricing

Strapi Cloud offers a free tier with 10k API calls, 10 GB storage, and 100 emails. The Essential plan starts at $15/month with more storage and domains. Higher tiers scale up to 1M–10M API calls and 1 TB bandwidth.

What Are the Differences Between Contentful and Stapi?

The biggest difference is hosting and control. Contentful is a fully managed, cloud-based CMS with a proprietary backend. Strapi is open-source and self-hosted, offering you complete control.
Strapi is ideal for teams that want to build custom APIs, enforce specific security rules, or control deployment environments. Contentful trades that flexibility for ease of use and reduced maintenance.
In terms of development, Strapi uses a REST or GraphQL API that you can fully customize, while Contentful provides a structured GraphQL and REST mix with stricter limits and conventions.
In terms of pricing, Strapi is free to use if self-hosted, but this requires dev time for setup and maintenance. Contentful charges based on users, content types, and environments.

Prismic

Best for: Simple, structured websites that need to launch fast

Used by: 7mesh, Evri

Prismic offers a slick UI, fast setup, and “Slice” components that make repeatable layouts easy. It’s ideal for lean teams or projects that don’t need much customization. Its tradeoff is less flexibility for complex content models.

Pricing

Prismic offers a free plan for one user. Paid plans (Medium, Platinum, Enterprise) scale by users, locales, API limits, and features. Even paid tiers now include locale limits.

What Are the Differences Between Contentful and Prismic?

Contentful is flexible in content modeling. You can define any type of content model and use GraphQL or REST APIs to fetch data. It’s powerful, but often requires more developer involvement.
Prismic is very approachable for non-technical users. It uses a Slice-based approach for reusable content components. It also includes a built-in preview system and easy-to-use editor UI.
On the downside, Prismic is less flexible for complex or deeply nested schemas. Its querying options are more limited compared to Contentful’s API.
Prismic offers a simple tier-based pricing, which may be easier to predict for smaller teams than Contentful’s.

Pricing Comparison

CMS	Free Plan	Starting Paid Plan	Pricing Model
Contentful	Yes (10 users, 2 locales)	~$300/mo (Lite)	Users, environments, and content types
Sanity	Yes (unlimited types, 1 dataset)	~$15/mo per seat (Growth)	API calls, bandwidth, and users
Storyblok	Yes (1 user, 1 space)	~$90/mo (Growth)	Project tiers and roles
Strapi	Yes (self-hosted, full features)	$0 (self-hosted only)	Hosting and maintenance
Prismic	Yes (1 user, 1 locale)	$180/mo (Medium)	Users and features

*Pricing as of July 2025

Checklist: How to Migrate from Contentful to a Headless CMS

Migrating from Contentful is a delicate process. One mistake can result in missing content or a blow to your SEO rankings. Before attempting it yourself, make sure you’re prepared or have the support of Contentful migration specialists.

We’ve prepared a seven-step checklist you can use to migrate from Contentful to a headless CMS of your choice. Follow it along for the best results.

Download Our Checklist

Step One: Rebuilding Content Schemas

Before anything moves, your new CMS needs to match the structure of your existing content. This may mean rethinking models to take advantage of your new platform’s strengths.

Step Two: Exporting Content from Contentful

Using Contentful’s CLI or API, you’ll extract all your entries, assets, and metadata. For large projects, this step often includes custom scripts to handle edge cases or nested relationships.

Step Three: Transforming the Data

Every CMS stores content differently. You’ll need to write a script that reshapes Contentful’s output into a format your new CMS understands.

Step Four: Importing to the New CMS

Once transformed, content is imported using the new platform’s API or CLI tools. This is usually done in stages to allow for testing and adjustments.

Step Five: Updating your Frontend

Your site’s data fetching layer will need updates to reflect new APIs, schema changes, and preview setups. This is a good moment to simplify logic or remove legacy workarounds.

Step Six: Testing and Validation

Everything gets reviewed: content accuracy, internal links, media assets, SEO tags, and redirects. The goal is a seamless switch with no broken URLs or missing pages.

Step Seven: (Optional) Redesign or Refactor

A migration is often a good time to modernize your component library or refresh the design.

Make Your Migration Count

Contentful migration should start with finding the best solution for your team. If you’re hitting limits, fighting with previews, or watching costs climb, it may be time to move on.

For companies using frameworks like Next.js, Sanity, Storyblok, and Strapi offer more flexibility, clearer pricing, and better alignment with modern development workflows.

Still, choosing the right alternative is only half the challenge. A smooth CMS migration takes planning, precision, and experience. If you’re considering replatforming from Contentful, we’re here to help.

Pagepro has supported many successful CMS migrations, and we’re always available if you need Contentful migration experts.

Ready to Migrate from Contentful? Contact Us

Frequently Asked Questions

Why Should I Migrate from Contentful?

Many teams outgrow Contentful’s pricing model, content limits, or technical constraints. If your team is struggling with slow previews, complex rich text rendering, or rising CMS costs, a migration may help streamline workflows and reduce long-term overhead.

What is the Website Migration Cost?

Costs vary depending on project size and complexity. A basic migration with minimal schema changes and no frontend updates might cost a few thousand pounds. A full migration can range higher.

How Long Does a Typical CMS Migration Take?

At Pagepro, smaller projects can be migrated in 2 to 4 weeks. For larger sites with complex schemas, multiple locales, or custom logic, migrations may take from 6 to 10 weeks.

What CMS Works Best with Next.js?

Sanity is a popular choice for teams using Next.js. Its fast APIs, schema-as-code approach, and support for live preview make it a strong fit. Strapi and Storyblok also offer solid Next.js support, though with different tradeoffs.

Will I Lose Content or SEO Rankings if I Migrate from Contentful?

Not if the migration is planned carefully. A proper CMS migration includes redirect handling, SEO tag preservation, structured content mapping, and link validation.

Why is Contentful So Expensive?

Contentful’s pricing is based on multiple factors: users, environments, content types, locales, and API usage. For small teams, this can be manageable, but as your content model grows or you scale your team, the costs can increase sharply. Many teams also pay more for features like staging environments or localization.

Is Sanity the Best CMS?

Depends on your needs. Sanity is one of the most flexible and developer-friendly CMS platforms available, especially for teams using React or Next.js. It offers schema-as-code, live preview, fast APIs, and strong customization options.

What Are the Disadvantages of Sanity CMS?

Sanity has a steeper learning curve, especially for non-technical teams. Its schema-as-code approach is powerful but requires developer setup.

Sources:

React Native Pros and Cons For App Development in 2025

Chris Lojniewski — Mon, 07 Jul 2025 07:32:10 +0000

Should You Choose React Native in 2025?

Considering mobile apps generated over $935 billion in revenue in 2024, having one for your business is a no-brainer. Take Payhip, for example – after the Pagepro team helped them create a mobile app MVP for their e-learning platform, the company discovered a whole new market to explore.

Source: Statista – Revenue of mobile apps worldwide 2019-2027, by segment

Developing a mobile app used to be a lengthy and expensive process, but mobile frameworks like React Native made it faster and less expensive. While React Native app development offers many advantages, like cross-platform development and code reusability, it also comes with some limitations.

To help you find the best solution for your mobile app, I’ll explain React Native pros and cons, when it works best, and when you might be better off with an alternative.

Let’s start by answering the first question…

What is React Native?

React Native is an open-source framework created in JavaScript by Facebook (now Meta). Its cross-platform nature allows for developing mobile apps for both Android and iOS operating systems at the same time and with one codebase.

Although React Native is now over a decade old, it continues to evolve, thanks to the excellent community and Meta’s dedication to keeping it alive. The most recent update, 0.80, has added support for React 19.1 and officially froze Legacy Architecture among many other changes.

Ready to create cross-platform apps? Contact Us

What Is The Primary Purpose of React Native?

React Native is designed to simplify and speed up mobile app development across platforms like iOS and Android.

Instead of writing separate native code for each platform (Swift/Objective-C for iOS and Kotlin/Java for Android), React Native lets developers reuse most of the code while still delivering a native-like performance and user experience. It does this by rendering components using native APIs, not web views.

What Are React Native Alternatives?

Although according to the Stack Overflow 2024 survey, React Native is one of the more popular options for mobile development, there are a few alternatives to it:

Native Development – In situations where React Native doesn’t meet your expectations, there is always the option of developing two separate apps for iOS and Android. While it might take more time and resources, it can be beneficial to some projects.
Flutter – A UI toolkit by Google that uses Dart to build fast, natively compiled apps for mobile, web, and desktop. It offers rich, customizable widgets and delivers consistent UI and performance across platforms. You can read our article comparing Flutter and React Native to learn more.
Lynx – A cross-platform framework written in Rust, focused on performance, memory safety, and minimal runtime overhead. Still in early development, but promising for Rust enthusiasts and future-looking mobile projects.
Xamarin – A Microsoft-backed framework that uses C# and .NET to build cross-platform apps. Allows code sharing and native performance, often used in enterprise and Windows-based environments.
Capacitor – Created by the Ionic team, Capacitor lets you build mobile apps with web technologies (HTML, CSS, JS/TS). It bridges web apps to native functionality using plugins, ideal for teams with strong web backgrounds.

What Is React Native Best For?

React Native can work great for any type of mobile app. However, it’s the best for feature-rich, cross-platform mobile applications that need to stay innovative.

You can find over 120 examples of React Native apps in this article, but for now, here are some of them:

Social Media and Networking Apps

These types of apps often require real-time interactions, dynamic content updates, and integration with various APIs and third-party services.

React Native’s flexibility and performance help develop responsive and interactive social experiences across multiple platforms.

Examples: Facebook, Instagram, Bluesky, and Discord.

On-Demand Services and Marketplaces

If you’re planning to develop an app for wide audiences and catering to multiple markets, React Native’s cross-platform capabilities let your business deploy visually consistent apps. Whether it’s food delivery or a marketplace, React Native has you covered.

Examples: Uber Eats and Evouchers

E-commerce and Retail Apps

The framework’s ability to deliver performant and beautiful interfaces with smooth navigation makes it perfect for building e-commerce and retail apps. Shop owners can add features like product catalogues, user reviews, secure payment gateways, and personalized recommendations to improve their stores.

Examples: Puma and Flipkart

Travel and Hospitality Apps

Businesses aiming to provide a good mobile experience to their customers across various devices will appreciate React Native’s functions. Integration with location-based services, push notifications, and interactive maps present in React Native improves the UX and engagement.

Example: Airbnb

IoT and Smart Home Applications

As the Internet of Things (IoT) continues to shape the future, React Native is a valuable tool for developing mobile apps that control and monitor IoT devices and smart homes. Its compatibility with various IoT protocols, and ability to communicate with embedded systems allows for integration between the mobile app and smart devices.

Example: Yeti Smart Home and Amazon Alexa

If you’d like to find other examples of React Native Apps, check our free eBook, which lists over 100 mobile applications developed with it. Get the list of Over 100 React Native App Examples

Since you know more about the framework, it’s time to focus on React Native pros and cons. I’ll start with its benefits.

What Are the Advantages of React Native?

Considering how functional it is, the advantages of React Native can be divided into two groups: business and development.

Pros of React Native for Business

1. One Codebase for Two Platforms

Since it’s a cross-platform framework, React Native teams can build for both iOS and Android using a single codebase. It’s a great way to save development costs and time, which startups and teams with limited resources will appreciate.

2. Faster Time-to-Market

Code reusability and fast build cycles make React Native ideal for prototyping and MVPs. One of Pagepro’s clients, a UK-based insurance company, received its experimental MVP in just 6 weeks, letting them quickly validate the product idea and prepare it for further development. Read our case study.

3. Lower Maintenance Costs

Maintaining one codebase for both platforms lowers the long-term effort and cost of bug fixes, feature updates, and security patches.

4. Easier Hiring

You don’t have to rely on separate iOS and Android specialists to make apps. Thanks to the framework’s popularity, the community of React Native offers a large talent pool of developers to build and scale apps.

5. Native-Like User Experience

Apps built with React Native use native APIs under the hood, delivering fluid and responsive experiences as close to fully native apps as possible.

Advantages of React Native for Development

1. Easy to Learn

If your team already uses React for web development, React Native is easy to pick up. The component-based architecture and familiar syntax help developers onboard quickly.

2. Hot Reloading for Fast Feedback

The hot reloading and fast refresh features in React Native help developers see UI changes during development instantly, which is great for fast iteration.

3. Over-the-Air (OTA) Updates

OTA functionality allows you to push critical fixes and feature updates directly to users without waiting for App Store or Google Play approvals. This is especially valuable during testing or active rollouts. You can read more about OTA updates in our dedicated article.

4. Active Community & Third-Party Support

The community around React Native is massive, with countless plugins, libraries, and support tools that accelerate development. This means a lot of resources you can use freely if your work ever stalls or you need help with developing a new feature for your app.

5. Access to Native Modules

React Native app developers can use native code when needed. Through platform-specific bridges, apps can access device hardware, APIs, and performance-optimized modules.

6. Component-Based UI Development

The framework’s declarative UI model and component primitives (like View, Text, Image) make mobile interface development simpler and encourage creating reusable code.

7. Expo Ecosystem for Speed and Simplicity

Expo offers a managed workflow that makes it easier to build, preview, and test apps without native configuration. It’s especially helpful for small teams and fast experiments.

Want to publish your app without friction? Get our Essential Checklist for Publishing Expo React Native Apps - a step-by-step guide to deploying apps with confidence and ease.

8. EAS (Expo Application Services)

With Expo’s cloud services, you can run cloud builds, manage assets, and automate your CI/CD pipeline, all without needing to configure native environments.

9. Great for Demos and Stakeholder Reviews

With Expo Go and demo mode, developers can share working prototypes with stakeholders without submitting to app stores. Perfect for client presentations or quick feedback.

When You Should Use React Native

Building cross-platform apps without doubling the workload – React Native lets you build for both iOS and Android using a single codebase, which can dramatically reduce development time and effort.
When your team already knows React or JavaScript – No need to learn platform-specific languages, since React Native fits right into the workflow of web developers.
Fast time to market is critical – Hot reloading, a large ecosystem, and shared code make it easier to ship MVPs or iterate quickly based on user feedback.
The app doesn’t require deep native integrations – React Native handles most common mobile features well. Unless you’re building something very platform-specific, it’s usually enough.
Delivering a native-like user experience – Apps built with React Native use real native UI components, so users get smooth, responsive interactions.
Focusing on long-term flexibility and scalability – The framework is actively maintained, widely adopted, and supports adding native modules when needed.
You want a native-like UI and performance – React Native renders UI using native components, so the experience feels more fluid than hybrid solutions like Cordova or Capacitor.
Future scalability is your goal – With community support, active development, and tools like Expo, React Native gives you flexibility to scale your app, integrate with native code when needed, and take advantage of third-party services.

What Disadvantages Does React Native Have?

While React Native is an amazing choice for cross-platform mobile development, some of its cons can have an impact on your app and its functionality.

1. Performance Limitations

While React Native performs well for most apps, it doesn’t match the speed and efficiency of fully native solutions. This is largely due to the JavaScript bridge, which can become a bottleneck. The Hermes engine helps optimize performance, but it’s not a complete fix for every use case.

2. Not Ideal for Highly Complex Interfaces

Building apps with pixel-perfect UI or advanced, interactive animations can be challenging in React Native. Native frameworks still provide more precise rendering and smoother animation control. Libraries like Reanimated and Lottie can improve things.

3. Limited Access to Native APIs

Some device-specific features or the latest OS-level APIs in native platforms may not be accessible out of the box. In these cases, you’ll need to build custom modules, which adds complexity and requires knowledge of Swift, Kotlin, or Objective-C.

4. Debugging Can Be Tricky

Because React Native sits between JavaScript and native code, debugging isn’t always straightforward. Native crashes may not show up in JavaScript logs and often call for tools like Xcode, Android Studio, Flipper, or Sentry to track down and resolve.

5. Updating and Maintenance Overhead

Keeping React Native and its dependencies up to date can be a headache. Breaking changes, version mismatches, or third-party library issues are common. This is one of the reasons why Expo is such a great addition to your mobile stack.

“*When it comes to updating issues in React Native, Expo provides a simplified update process and offers over-the-air updates that eliminate the need for users to manually update the app through app stores. Deploying bug fixes and feature updating is much quicker.”*

Kornel Kwiatkowski, React Native Developer at Pagepro

6. Heavy Reliance on Third-Party Libraries

React Native’s strength lies in its ecosystem, but that can open you up to some risks. Many features depend on third-party libraries, and if those libraries become outdated or unsupported, it can introduce bugs or compatibility issues during updates.

7. Larger App Sizes

React Native apps can be larger than native apps since they include the JavaScript runtime and other dependencies, which can affect users who own low-end devices or are on slow networks.

8. Occasional Compatibility Issues

Code reuse between platforms can sometimes backfire, especially when working with platform-specific features like push notifications, deep linking, or native UI components.

When You Should Not Use React Native

You need top-tier performance – Compared to native solutions, React Native may fall short in apps that require very fast, low-latency processing.
Deep native integrations are a core requirement – Apps that depend on platform-specific APIs (e.g. Bluetooth, advanced sensors, background services) are often better suited to fully native development.
The app must support brand-new OS features immediately – React Native doesn’t always support the latest iOS or Android features out of the box, so native development is safer when early adoption is important
App’s size must be small – Because of its runtime and dependencies, React Native might result in larger binaries, which can be problematic for low-end devices or data-sensitive users.
Your project relies heavily on complex visuals – If your product design depends on UI and platform-native look and feel, especially when it comes to animations, native tools offer more precise rendering and flexibility.

React Native Pros and Cons Summary

Since you got this far, here’s a quick sum-up of React Native pros and cons:

Business Benefits	Developer Benefits	React Native Limitations
Lower costs and faster MVP delivery	Fast iteration with hot reloading	Slower performance vs. fully native
One codebase for iOS and Android	Reusable components and UI primitives	Not ideal for complex animations or visuals
Shorter time-to-market	OTA updates and Expo ecosystem	Limited native API access without bridges
Easier hiring and team scaling	Familiar for React/JS developers	Dependency on third-party libraries
Native-like user experience	Access to native modules	Larger app bundle sizes
Flexibility for testing and prototyping	Strong community and support	Occasional compatibility or debugging issues

React Native Pros and Cons for Cross-Platform App Development

React Native development remains a strong option for mobile apps in 2025. The framework is tailor-made for businesses looking to launch faster, test ideas quickly, and reduce development costs. What’s more, its shared codebase, active ecosystem, and near-native performance make it ideal for building high-quality apps across platforms.

That said, it’s not always the best fit for highly complex, animation-heavy, or deeply integrated native applications. The right decision depends on your goals, team skills, and the app’s technical needs.

When it comes to React Native pros and cons, there isn’t one solution to fit all applications. If you’re unsure whether React Native is the right choice, our team at Pagepro is happy to help. We’ve delivered everything from MVPs to cross-platform apps, so feel free to get in touch for advice.

Kickstart your project with React Native experts - contact us.

Sources

FAQ

What Are The Main Advantages Of React Native?

React Native lets you build for both iOS and Android using a single codebase. This makes development much faster and reduces potential costs. If you’re familiar with React, you’ll have little problems

Additionally, the framework supports fast iteration through hot reloading, offers access to native APIs , and has a strong ecosystem with tools like Expo and OTA updates. Its learning curve is also gentle for teams already using React.

What Are The Disadvantages Of React Native?

While it’s very versatile, React Native still has limitations. Performance doesn’t always reach the level of native apps, especially for animation-heavy or complex tasks. Some native features aren’t accessible without custom bridges, and debugging can be more complex. There’s also a reliance on third-party libraries and the potential for larger app bundle sizes.

Is React Native Still Relevant In 2025?

React Native is very relevant in 2025, thanks to the support of its active community and the parent company Meta. The framework continues to improve, with updates like version 0.80 adding React 19 support and freezing the old architecture.

Who Uses React Native?

Popular apps like Facebook, Instagram, Bluesky, Amazon, Discord, Uber Eats, Walmart, Shopify, and Airbnb all use React Native in some way. It’s also been used by Pagepro clients like Payhip and Learn Squared to launch MVPs and explore new markets.

Is React Native Good for MVP Development?

Yes, React Native is a great choice for MVPs thanks to its fast build cycles, code reusability, and the ability to launch on both iOS and Android at once. It helps teams validate ideas quickly and cost-effectively.

What Is React Native Best For?

React Native works best for cross-platform mobile apps that need to be built quickly, updated often, and delivered with a native-like experience. It’s ideal for social apps, marketplaces, e-commerce platforms, travel services, and even IoT interfaces.

Can React Native Handle Complex Apps?

It depends. React Native handles many complex features well, especially with the help of native modules and libraries, but apps featuring intensive animations, advanced graphics, or deep hardware integrations might be better suited to native development.

How to Lower Vercel Hosting Costs by 35%

Chris Lojniewski — Mon, 16 Jun 2025 12:33:25 +0000

High Vercel Hosting Costs? Check the Code

When it comes to hosting Next.js apps for SaaS, few other solutions are as comfortable and performant as Vercel. However, Vercel hosting costs can still increase quite fast, especially at production scale.

If your first thought is to blame Vercel for this, it would be wrong. The company has recently implemented numerous changes, which have helped cut costs across its services for thousands of users, but even that might not be enough if your code is to blame.

In our recent project, we worked with a SaaS platform struggling to keep its hosting budget under control. Despite having a relatively lean app, their monthly Vercel invoice kept growing. After a full audit, we discovered numerous optimization issues in their setup and, by addressing them, reduced the client’s Vercel costs by 35%, increased traffic capacity by 1.5×, and reduced build time by 40%.

Today, we’ll use the experience gained from working on that project to show you four easy ways you can optimize your code.

First, let’s see what exactly you are paying for when using Vercel.

How Much Does Vercel Hosting Cost?

However, the problems start when your app gets hit with a sudden growth. Even the best-prepared teams might not anticipate how variable usage changes, like function execution and bandwidth, can add up behind the scenes.

Source: Vercel Pricing in June 2025

Vercel offers three separate tiers for its users:

Hobby, a generous free tier for small personal projects or developers starting a new web app.
Pro, a $20/month + additional usage, which works best for professional projects and businesses.
Enterprise, an option that gives everything your advanced project needs. Unlike the two other options, it tends to have custom pricing, depending on your needs and usage.

Vercel Tiers Comparison

Each of Vercel’s tiers offers great features and developer experience depending on your needs. When deploying a web application, you should keep in mind its limitations:

Feature	Hobby Plan (Free)	Pro Tier ($20/user/mo)	Enterprise Plan (Custom Pricing)
Function Execution Limits	100 GB-hours	1 TB-hours	Custom (typically higher)
Bandwidth	100 GB	1 TB	Custom (e.g., 5TB+)
Build Execution	600 minutes/month	1,000 minutes/month	Custom (up to unlimited)
Team Seats	1 user	$20 per additional user	Negotiated
Analytics & Monitoring	Basic	Enhanced	Full observability + integrations
SLAs & Support	None	Community support	Custom SLAs, dedicated support

Vercel pricing features as of June 2025

When Should You Commit to the Enterprise Plan?

This is a question we hear often, especially when comparing Pro vs Enterprise.

If you find yourself going over usage limits of Vercel Pro, it might be worth checking if you won’t be better off upgrading, rather than paying overcharges. Alternatively, those who need better security solutions could pick Vercel Enterprise because it supports SOC 2, ISO 27001, and HIPAA data policies, and includes features like Single Sign-On (SSO), role-based access control, private networking, and dedicated infrastructure.

Many dev teams upgrade their plan, only to find they’re now paying more to scale inefficiencies that remain in their apps. While the Enterprise Plan includes many advanced features, more security, and customer support, it’s not the best solution for every team. If you want to start saving on Vercel hosting costs quickly, your best option is to first look into your code and see if there aren’t any opportunities there.

Looking for Savings in Your Vercel Set Up? Contact Us.

Where to Start Optimizing Your Vercel Hosting Costs

Do an Architectural Audit

Before making any changes, take a step back and audit how your app is structured. For our client, we began by analyzing their deployment architecture, how routes were handled, where serverless functions were triggered, and how often they were executed.

Using Vercel’s built-in analytics alongside our own monitoring tools, we were able to identify inefficiencies that weren’t visible from the code alone, like bottlenecks affecting execution time or data transfer.

Identify Cost Drains

Once the big picture was clear, we drilled into the specifics. Where was bandwidth being consumed most? Which pages relied too heavily on SSR? Which API routes were generating the most function invocations?

Answering these questions helped us isolate the most expensive parts of the app, often things the client didn’t even realize were driving costs.

Begin Targeted Optimizations

With the data in hand, we prioritized quick wins. We replaced unnecessary SSR with SSG and ISR, adjusted or added some caching for API responses, and slimmed down bloated bundles.

Four Optimizations That Helped Our Client Save 35% on Vercel hosting costs

Optimization 1: Monitor Your Vercel Setup

Aside from the rising cost, one of the biggest issues our client’s team had was the lack of visibility into the cost drivers. To help them get a better view of their app, we used Vercel’s analytics to get insights into function invocations, build times, and bandwidth usage.

Immediately, we were able to find areas for improvement and showed our client what exactly was affecting their costs. Knowing where the problems lay helped find optimal solutions and made the client’s team aware of what to pay attention to in the future.

Optimization 2: Replace SSR with SSG and ISR Where Needed

Many SaaS teams use SSR for all dynamic content by default. That’s understandable, since it feels like the most flexible solution. But SSR triggers serverless functions on every request, even for data that rarely changes.

In this project, we started with a full audit of all dynamic routes. We found that many pages could be served statically or semi-statically. For marketing pages and documentation, we switched to SSG. For user dashboards with semi-frequent updates, we used Incremental Static Regeneration (ISR) with refresh intervals based on how often the data actually changed.

We also made sure fallback behavior and cache invalidation were configured correctly to avoid stale data.

Get Next.js Vercel Cost Optimization Guide

Optimization 3: Cut Down on Function Invocations

SSR wasn’t the only thing influencing the bills in this project. Several client-side components in the app were making repeated fetches for unchanged data. It was happening particularly often on route transitions or periodic refreshes.

To stop this loop, we introduced SWR (stale-while-revalidate) on the frontend to cache requests. On the backend, we added caching for frequently accessed API responses to reduce redundant processing and improve response times.

These changes reduced the number of daily invocations, which helped to save hundreds of dollars per month and reduce the load on our client’s backend services.

Optimization 4: Slim Down Your Bundle & Build

Our client’s app was using a few heavy dependencies unnecessarily and bundling entire icon libraries when it only needed a few icons. Bloated JavaScript bundles increase build times and hosting costs, so changes had to be implemented immediately.

We ran a full bundle analysis using @next/bundle-analyzer. Based on the output, we removed unused packages, swapped out heavier libraries for native alternatives, and deferred rendering of complex components using dynamic imports. We also used image optimization to increase performance where possible.

With those changes, we managed to drop the build time by 40% and improved perceived app speed for users thanks to a smaller initial JS payload.

Results

Source: Our client’s Vercel billing

Our client’s project launched in a controlled beta in December 2024. Since implementing our optimizations, they have seen several notable improvements:

Their monthly Vercel costs dropped by 35%.
By streamlining builds, we managed to reduce their deployment times by 40%.
The platform now handles 1.5x the user traffic without additional costs.
The cost monitoring dashboard helped our client’s team manage usage proactively.

READ THE FULL CASE STUDY

Vercel uses a pay-as-you-go pricing structure, which means you pay for only the services you really use. Their recent changes to the pricing model (like introducing Fluid Compute) helped users to lower the costs even more.

The project is constantly being improved, based on the usage data and user feedback, which has been positive so far. The users reported faster load times and no disruptions during peak usage. We continue to support the client, making sure the platform stays optimal.

Optimize Vercel Now, Scale Without Surprises Later

Deploying the Next.js app on Vercel doesn’t have to mean breaking the bank. It’s a comprehensive solution that works perfectly well for Next.js apps and offers excellent built-in functions, like its analytics tools.

While some code inefficiencies can raise your bills on Vercel, you don’t need to spend months fixing them. T*he solutions we offered for our clients didn’t require huge changes to their architecture*, but resulted in real improvements and savings.

If you’re spending over $1,500/month on Vercel and haven’t yet looked into optimizations like this, you’re almost certainly overpaying for features you might not need.

We can fix it in two weeks.

Book a free 30-minute cost audit now and see what can be done to help you save money on hosting.

Start Saving on Vercel Now

Book Free Consultation

FAQ

How Much Does Vercel Cost?

It varies. With Pro Plan, you’ll be paying $20 + additional usage per month, but unoptimized SaaS apps often end up spending far more than expected. Enterprise Plan allows for more customized, but not always lower, pricing.

Is Vercel Enterprise Worth It?

It can be, if you’ve already optimized your setup, hit the Pro Plan limits, or need SLAs or dedicated infrastructure. Otherwise, try optimizing your current setup on the Pro first.

Can Next.js Apps Be Cheaper to Host Elsewhere?

They can be under some circumstances. If you’re primarily using static content or want full control over costs, self-hosting or different hosting platforms like Cloudflare, Netlify, or AWS can be more affordable. However, that solution requires more technical expertise and prevents you from enjoying many of Vercel’s built-in functions.

Is Vercel Free?

Vercel Hobby Plan is a free option for those who work on small projects, or are experimenting. While it’s limited, Vercel provides a generous set of features that make it worthwhile.

What’s the Fastest Way to Reduce My Vercel Hosting Costs?

To optimize Vercel costs, replace unnecessary SSR with ISR and SSG, minimize bundle sizes, and add monitoring to spot cost spikes early.

What is Sanity.io: 2025 Headless CMS Guide

Chris Lojniewski — Mon, 02 Jun 2025 12:41:09 +0000

Headless Content Management with Sanity.io

Have you been wondering why Sanity is becoming so popular with modern development teams? You’re in the right place.

At its core, Sanity is a headless CMS, but with the recent changes, it has evolved past that and become a structured content platform built to support multi-channel publishing, real-time collaboration, and fully customizable editorial workflows.

As long-time fans of Sanity.io, we’ve decided to prepare an introduction to this amazing content management platform and why it might be the best choice for your next project

We’ve also prepared a video on why we think Sanity is a great choice for most projects – give it a watch!

But before we explore what sets it apart from other platforms, we should start by answering the question what is Sanity.

What Is Sanity CMS?

Like we’ve mentioned, Sanity is a headless content management system. In traditional CMS platforms like WordPress or Joomla, the content and its presentation are tightly joined, which can be very limiting when you need to deliver content across different platforms. A headless CMS, on the other hand, treats content as structured data and delivers it via APIs.

Sanity also fits into the broader composable CMS category and can be integrated with other services in your tech stack, like frontend frameworks (Next.js, React), eCommerce platforms (Shopify), or analytics tools.

In May 2025, the Sanity team unveiled the Spring Release 2025, marking the platform’s evolution from a headless CMS to a Content Operating System. This change came in with completely new tools, which greatly improved the workflows of content creation, management, and distribution:

Sanity Dashboard: A central hub that provides quick access to Studios, Canvas, Media Library, and custom apps. It offers a complete view of content operations across teams and apps.
Canvas: Previously named Sanity Create, Canvas is an AI-assisted, free-form writing environment. It allows for preparing content with non-intrusive AI support.
Media Library: An asset management system that organizes media across teams and datasets. It supports role-based access, versioning, and automation.
App SDK: Developers can build custom applications within Sanity, tailored to specific workflows.
Functions: Spring release introduced serverless functions, enabling complex backend logic, such as data synchronization and integration, directly within Sanity.
Agent Actions: Brings AI capabilities to content workflows through a programmatic interface. It can audit documents, identify gaps, suggest updates, and organize them into manageable work packages.
Insights: Offers visibility into content performance and workflow bottlenecks.

How Sanity CMS Works

Sanity’s architecture is built around three main components that work together to deliver a developer-first content platform.

Content Lake

At the heart of Sanity is the Content Lake. It’s a fully managed backend where content is stored as structured data, not HTML, which makes it reusable across any frontend.

Content Lake supports real-time updates. That means changes made in the Studio are instantly reflected in apps and websites. It also scales automatically with content versioning and document-level access. With that, you’re able to build once and distribute your content anywhere – no need to rewrite logic for each platform.

Sanity Studio

Sanity Studio is an editing environment in which users can create, manage, and organize content. It’s open source, written in React, and fully customizable. Instead of rigid templates, Sanity Studio lets you define your content model using JavaScript.

What’s more, it includes plugin support for adding things like AI assistants, visual previews, or third-party integrations. The themeable interface that matches your brand or client needs and custom content types makes Sanity Studio one of the few platforms that adapts to your team.

Source: Sanity.io

GROQ and APIs

Sanity uses GROQ (Graph-Relational Object Queries), a language designed for structured content. Although its syntax is similar to GraphQL, GROQ was built from the ground up to handle deeply nested structures and fetch exactly the shape of data you need in a single query.

In addition to GROQ, Sanity provides APIs that support different development styles. You can use the auto-generated GraphQL API or tap into the REST API for simple integrations with third-party services like Zapier or Netlify. Real-time listeners are also available, so your application can instantly respond to content changes.

Source: Sanity.io on Github

Pros and Cons of Sanity Content Management System

While it can be a good fit for most organizations and businesses, Sanity has some drawbacks that should be taken into account before making a decision. Let’s have a look at some of them:

Pros of Sanity CMS

Developer-First: Since the content model in Sanity is defined in the code (JavaScript or TypeScript), it can live in version control, evolve with your project, and adapt to edge cases that more traditional CMS platforms can struggle with.
Portable Content: Because it’s JSON-based and delivered via APIs, content in this CMS can be reused across different platforms, even between web and mobile.
Real-Time Collaboration: In Sanity, editors can collaborate on the same document and see updates as they happen, a very helpful feature for distributed teams chasing deadlines.
Custom Editorial Interfaces: If your content team has unique needs, Sanity gives you the option to build your own editorial interfaces, which can be great for brands managing multiple markets.
Powerful Ecosystem: The Spring Release 2025 expanded Sanity’s capabilities. The Media Library, Canvas AI editor, and App SDK let you build entire workflows within the Sanity environment.

Cons of Sanity CMS

Learning GROQ: GROQ is powerful, but it’s not as well-known as GraphQL or SQL. It may take time for new developers to get comfortable with its syntax.
Complex Initial Setup: Sanity Studio is very customizable, but has no templating system like you’d find in WordPress or Webflow. Non-developers will likely need expert help to define schemas and configure Studio.
Maintenance Responsibility: Because you can customize so much, you’re also responsible for maintaining those customizations. While it’s manageable, you should keep it in mind if your team has limited frontend resources.

Now that you have a better understanding of Sanity’s capabilities, we can move on to analyze who benefits most from it.

Who is Sanity for?

Developers

Developers have full control over Sanity’s content architecture, frontend integration, and editorial workflows. The schema definitions are easy to maintain and version with the rest of your project, since they live in code. Additionally, the App SDK and serverless Functions allow for building fully custom content tools within the Sanity ecosystem.

Content Teams and Marketers

Sanity is full of features meant to make the work of editors smoother, such as real-time collaboration, live previews, and structured content. The Canvas interface with AI-assisted drafting and the centralized Media Library help content specialists move faster, without needing devs to implement every change.

Startups and Growing Teams

The generous free tier and modular setup make Sanity a great fit for early-stage startups. You can start small with a simple Studio, and then scale content delivery as your needs grow.

Enterprise Teams

For companies managing large content operations, Sanity supports a variety of functions: role-based access control, dataset partitioning, and complex integrations with CDNs, eCommerce platforms, and analytics tools. Insights and Agent Actions offer visibility and automation for future expansions.

Non-technical users

Although the initial setup usually calls for developer input, once the Studio is set up, even non-technical users can work with the content. Editors don’t need to understand how the frontend works to work inside a custom interface designed around their tasks.

Sanity CMS Pricing

Sanity’s usage-based pricing scales from solo developers to enterprise teams, making it accessible for a wide range of content needs.

Source: Sanity.io

Free Plan: For Individual Developers or Small Teams

Ideal for personal projects, MVPs, or learning Sanity. You get 20 seats, 2 datasets, and enough bandwidth and storage to support simple use cases. Real-time collaboration and access to the Media Library are included, but advanced features such as comments and AI Assist are missing.

Growth Plan: For scaling teams

At $15 per seat/month, this plan is perfect for startups or growing teams that want more roles (up to 5), private datasets, collaboration features (like comments and tasks), and optional pay-as-you-go overages. You can also purchase add-ons like SSO and extended quotas.

Enterprise Plan: For large organizations with complex needs

This custom-priced tier is tailored for companies that need enterprise-grade support, SAML SSO, uptime SLAs, advanced access control, and high usage quotas. It includes onboarding, custom retention, audit trails, and premium dataset features.

Sanity Use Cases

To prove Sanity’s flexibility, here are a few real-world examples showing how different teams use Sanity to solve practical content challenges:

Ecommerce

Modern eCommerce sites require speed, high personalization, and integration with product data to perform well. Sanity fits right in, giving teams a structured content layer they can shape around customer journeys.

Source: Siella Beauty

Siella Beauty‘s Shopify store uses Sanity to manage campaign content, editorial, and landing pages, separately from their product catalog. This way, their team has more control over storytelling while Shopify handles transactions.

Marketing Websites

Marketing teams often need to update copy, swap visuals, or launch landing pages with no time to wait for a developer. Sanity Studio makes that possible by offering a CMS custom-made for their workflow.

Source: Lyngen North

Lyngen North, an arctic luxury hotel, wanted a high-performance website that reflected their brand and offered easy content updates. Combining Sanity with the power of Next.js, we delivered a fast frontend and a custom Studio that lets the team update text, imagery, and packages whenever they need.Documentation & Knowledge Bases

Structured documentation is where Sanity shows its full potential. It allows for building scalable docs with ease thanks to rich text support, nested references, and real-time updates.

Source: Carousal

Causal built their entire documentation system using Sanity and Next.js. They structured everything in portable blocks of content, which link related topics, let them add code snippets, and serve docs between different platforms.

Is Sanity Right for You?

If your team needs a CMS that adapts to your tech stack, supports custom workflows, and scales with your content operations, Sanity is one of the most capable options out there. It’s especially well-suited for teams that value developer control, structured content, and multi-channel delivery.

At Pagepro, we’ve helped companies implement Sanity to streamline marketing workflows, migrate from legacy CMSs, and build scalable, content-driven products. If you’re considering Sanity for your next project, get in touch with us or check out our case studies to see what’s possible.

Frequently Asked Questions About Sanity CMS

Is Sanity a CMS?

Yes, Sanity is a headless CMS (Content Management System). Unlike traditional CMSs, it separates content management from presentation, making it ideal for multi-platform publishing.

Is Sanity Free?

Sanity offers a free tier with basic features and usage limits. For larger projects or team collaboration, paid plans are available with added capabilities like increased API quotas, user roles, and usage analytics.

What is Sanity Studio?

Sanity Studio is an open-source editing environment built with React. It’s fully customizable, letting you design and edit project workflows.

What Language Does Sanity Use?

Sanity uses JavaScript and React for its Studio, and its query language is called GROQ (Graph-Relational Object Queries), which is designed specifically for querying structured content.

What Are the Benefits of Using Sanity?

Some key benefits include real-time collaboration, content modeling, portable APIs, and developer freedom. It’s a great fit for content-rich, scalable applications.

Who Uses Sanity?

Sanity is used by companies ranging from startups to enterprises. Notable users include Nike, Figma, and National Geographic. It’s especially popular among teams building eCommerce, marketing websites, and digital experiences.

What Are the Alternatives to Sanity?

Alternatives include traditional CMSs like WordPress and Webflow, or other headless CMSs like Strapi, Contentful, and Prismic. Sanity stands out for its real-time editing and Studio customization.

5 Top CMS Platforms in 2025: Pagepro Picks

Chris Lojniewski — Mon, 26 May 2025 12:01:53 +0000

How to Choose the Best CMS Platform in 2025?

When our clients ask me, “Which CMS is best for my website?” my answer usually depends on what kind of project they’re running. No CMS is a one-size-fits-all solution.

To help you decide on the right one for the job, I’ve prepared a list of five platforms Pagepro recommends in 2025. These CMSes are fast to set up, supported by large plugin ecosystems, and ideal for a variety of use cases.

I’ll be focusing specifically on traditional CMS platforms that come with a built-in frontend and handle both content management and page rendering in one place. If you’re looking for something more modern and API-driven, where your CMS powers apps, websites, and more, check out our guide to the Top 5 Headless CMS Platforms. You can also read more about What is Headless CMS.

What to Consider When Choosing the Best CMS for You

Before we go over specific platforms, we need to understand what matters the most for your website. The best CMS for one site might not necessarily be the perfect choice for the other, since their priorities and technical support might differ. When choosing a solution for yourself, here’s what you should pay attention to:

Ease of Use

If you’re not a developer, this is probably at the very top of your list. Some CMS platforms come with visual editors or drag-and-drop interfaces that make building and editing content easy for non-technical users like marketers. Others are more flexible, but have a steeper learning curve or need developer involvement.

Plugin and Theme Ecosystems

The bigger the ecosystem, the more likely you’ll find pre-built tools or designs to use in your project. WordPress, for example, has tens of thousands of plugins available. Smaller CMSes might require more custom work to have the same level of functionality.

Security and Maintenance

Every CMS needs to be updated regularly, and while there are platforms that automate this process, many put the responsibility on you. The more complex your CMS setup, the more you’ll need a plan for maintenance and hosting security. Consider platforms that actively patch vulnerabilities and have regular update cycles.

Support and Community

A vibrant community can be just as valuable as official support. Active forums, documentation, third-party tutorials, and developer networks can help you solve problems faster. That means mature platforms like Joomla and Drupal often have the benefit of established communities with hundreds of developers able to answer your questions.

Customizability

Many CMS offer you all the functionalities, b*ut some give you a base to build custom components on top of*. If your project has specific design or feature needs, a platform that gives your developers room to work without restrictions is the best CMS.

Multilingual Capabilities

Are you targeting users in multiple countries or regions? If so, multilingual support is a must. There are CMS platforms (like Joomla and Drupal) that handle this natively.

SEO and Performance

Your CMS should help improve your SEO. Look for tools that support custom metadata, clean URLs, sitemaps, and fast page loads. CMS platforms that let you control image optimization, caching, and performance settings give you more options to stay search-friendly.

Since we know what we’re looking for, time to introduce you to the five best CMS platforms Pagepro recommends in 2025: WordPress, Webflow, Joomla, Drupal, and Umbraco.

Not Sure Which CMS Your Website Needs? Ask Our Experts

WordPress CMS

Still the world’s most popular CMS, WordPress powers over 40% of the web. It’s loved for its ease of use, massive plugin library, and flexible theming system. All of these make it suitable for everything from personal blogs to full-scale business websites, but WordPress is not without its flaws.

Pros of WordPress

The Most Flexible CMS Available – WordPress is incredibly versatile and capable of becoming almost anything you need it to be, even a headless CMS. It offers the tools to create the perfect website for users of all skill levels and needs.
Low Cost – WordPress.org, the self-hosted version, is completely free to use. WordPress.com, on the other hand, is a hosted service with various pricing plans. When using WordPress.org, your primary expense will be securing a hosting provider, which can be as affordable as $3 per month. Bigger businesses can pay from $20 to $50+/month to get better performance and support for their sites.
Technical Expertise Not Required – You don’t need advanced web dev skills or a team to get your website up and running with WordPress. The platform is designed to be accessible for beginners, but experienced users can also take advantage of its more complex and powerful features.
Free Resources – WordPress offers access to over 60,000 plugins you can use to create your projects for free. Users can easily manage backups, improve security, optimize SEO, and handle any other functionality they might need.
The Largest CMS Community in the World – The platform is known for its big and active community. The huge number of community resources available guarantees that you can quickly find an answer to your questions.

Source: Jetpack.com

Cons of WordPress

High-Maintenance Security – The freedom WordPress offers comes with the added responsibility of managing backups and security, which can be a burden on smaller teams.
Needs Frequent Updates – To keep your site running smoothly, your plugins must be updated regularly. Although WordPress allows for automatic updates, monitoring these updates is still a good practice. It lets you avoid compatibility issues that can slow down your site or introduce security risks.
Potential for Performance Issues – Going overboard with the plugins or themes offered by WordPress and its community can bloat your site, leading to slow loading times and a negative user experience.
Dependent on Third-Party Plugins – WordPress relies heavily on third-party plugins to extend its functionality, which can be a double-edged sword, since they can introduce compatibility issues and functionality problems into your system.

Is WordPress The Best CMS For Me?

If you value control, scalability, and community support, a CMS like WordPress might be the best choice.

As a platform, WordPress offers great value and flexibility, with the added benefit of great community support. It’s one of the best content management systems on the market for users of all skill levels, and supports a wide range of different projects.

It can be difficult to maintain, however, and the bloat tendency has to be always considered when choosing custom plugins.

Webflow CMS

Webflow is a no-code website builder that allows users to create custom themes and design layouts from scratch without traditional coding. It generates clean HTML, CSS, and JavaScript in the background, achieving front-end results through a visual interface.

If you want to learn more about Webflow, check out our article: What is Webflow?

Pros of Webflow

Fully Customizable Drag & Drop Menu – It has an intuitive drag-and-drop builder for creating custom websites without HTML, CSS, or JavaScript. This focus on visual design lets users customize components to their liking.
High-Quality Resources – The platform provides great customer support and an active online community for finding help and sharing knowledge. High-quality tutorials available through Webflow University offer written instructions and video tutorials.
Attractive Free Plan – Webflow’s free plan lets you launch projects without providing credit card information, which is great for quick setup and experimentation. As long as users keep the Webflow branding in the URL, they can create original designs without additional costs.
SEO Control – Webflow gives you control over meta tags, structured data, and sitemap generation, which is a big plus for marketing-focused sites.

Source: Webflow

Cons of Webflow

Better for Smaller Projects – Webflow might struggle to meet the needs of larger, more complex projects. Although it supports dynamic content through CMS Collections, its limitations around advanced logic make it a better pick for smaller or content-driven projects over complex apps or platforms.
No Advanced Blogging – Webflow lets you build blogs with its CMS, but lacks features like post scheduling, native comments, and multi-author support. Adding advanced functionality sometimes calls for third-party tools or other solutions.
Export Limitations – While Webflow does allow HTML/CSS/JS export for static sites, you cannot export CMS content or logic. This is very restricting for users who may want to migrate their sites or switch hosting options in the future.
Dependency on Webflow Hosting – Sites created on this platform r*ely on Webflow for hosting*, and that might not always align with your preferences or needs.
Basic User Permissions – User role customization (especially for clients or teams) is limited. Enterprise workarounds exist but are not standard in lower plans.

Is Webflow the Best CMS for Me?

If you prioritize ease of use and need a customizable solution for smaller projects, Webflow might be best suited for your website development.

Webflow is a great option for creating custom websites without coding. The intuitive drag-and-drop builder supports full customization, meaning it’s suitable for marketing sites and galleries.

Still, it might not handle larger projects as well as its competitors. The basic blogging features and migration issues limit flexibility. The lack of hosting freedom can also feel very restricting.

Joomla CMS

Joomla is a free and open-source CMS platform built on PHP. Suitable for a wide range of web projects, it also comes with a pretty steep learning curve.

Pros of Joomla

Flexible – The modular architecture of Joomla allows for quick adding or swapping of features, letting the CMS grow together with your site. You can scale without worrying about staying behind the competition.
Security – Security is the area where this content management system shines, thanks to features like two-factor authentication, access control levels, and regular security updates.
Built-In Features – Thanks to Joomla’s built-in features, you don’t need to install additional plugins to get all the functionalities you need.
Great for User Management – Joomla excels in user management and offers support for multiple user groups and access levels. This is very useful for community-driven sites or organizations with complex user hierarchies

Source: Kevin’s Guide

Cons of Joomla

Requires Technical Knowledge – Joomla is less intuitive and has a steep learning curve, which can be a barrier for beginners or non-technical users looking for a simple solution.
Fewer Extensions and Templates Compared to Competitors – The platform offers a decent selection of extensions and templates, but the options are somewhat limited. It makes finding the exact functionality or design you need harder.
Risk of Compatibility Issues – The flexibility of Joomla comes with the risk of compatibility problems when using multiple extensions or custom templates, which can be frustrating, time-consuming, and costly to fix.
Higher Maintenance Requirements – Joomla often requires ongoing maintenance. It can be burdensome for those who do not have the technical skills or time to manage regular updates.
Declining Popularity – The declining popularity of Joomla means it has a smaller community and fewer resources compared to more widely used platforms.

Is Joomla the Best CMS for Me?

If you’re comfortable with its technical demands and need a scalable CMS, Joomla could be a good fit.

Joomla is ideal for a wide range of websites, from blogs to complex corporate sites. It offers strong user management, native multilingual support, and robust security features, making it suitable for projects requiring scalability.

It has a steeper learning curve and fewer extensions and templates compared to other CMS platforms, which may pose challenges for beginners. Regular maintenance and monitoring for compatibility issues can also be time-consuming.

Drupal CMS

Drupal remains the top choice for organizations with strict access control and security needs, like governments, universities, or NGOs. Its power lies in its modular architecture and flexibility, but it’s not a novice-friendly platform.

Pros of Drupal

Flexibility and Customization – Drupal is a CMS that can adapt to any project requirements. Its modular architecture makes it easy to add or remove new features. Developers can use it to create anything they want, be it simple blogs or complex sites.
Great Security – This CMS has strong security features, including two-factor authentication and user access controls. With these, your data remains protected from potential attacks, though regular updates and monitoring are still recommended.
User Management – Sites with complex user interactions will benefit a lot from Drupal’s advanced user management. Administrators can define roles and permissions in great detail, which helps control access levels for different users or groups.
Extensive Library of Modules – Drupal’s module library covers features like SEO tools, or e-commerce solutions, improving the platform’s functionality across all domains.
Strong Community Support – Just like WordPress, this platform has a dedicated and active community that provides valuable resources and support.

Source: Drupal.org

Cons of Drupal

Difficult for Beginners – Drupal’s features and configuration options require a higher level of technical knowledge. New users might find it hard to navigate its interface and fully explore its capabilities.
Higher Development Costs – Because of its complexity, a Drupal site often requires hiring experienced developers. This can increase development and maintenance costs, especially for businesses without in-house dev teams.
Regular Maintenance Requirements – To properly maintain a Drupal site, you need regular updates to the core system and modules. It can be time-consuming and require technical skills, which users without a background in web development might lack.
Potential Malfunctions – Drupal’s flexibility can lead to c*ompatibility issues*. When using multiple modules or custom themes, you may encounter conflicts between extensions, causing parts of the site to malfunction.

Is Drupal the Best CMS for Me?

If you have the technical skills or resources and require a personalized website, Drupal could be it.

Drupal is great for creating customizable websites. Its strong security measures and user management ensure safety, and modular architecture allows teams to build sites tailor-made for their needs.

Remember, Drupal is geared towards web developers. The setup of this CMS may be difficult, and hiring skilled developers is pricey.

Umbraco CMS

Umbraco is a flexible, open-source CMS built on the .NET framework. It works great for organizations that already use Microsoft technologies. Developers appreciate its clean codebase, customizable structure, and polished admin UI.

Pros of Umbraco

Development Freedom – Umbraco provides a lot of freedom in creating websites and web applications, and can be applied to any type of website.
Customization Potential with Microsoft .NET Framework – Since it’s built on the Microsoft .NET Framework, Umbraco is a .NET Core CMS and allows for extensive customization. Users with a basic understanding of C# and .NET can even develop their own extensions
User-Friendly Interface – The platform features a user-friendly interface that’s accessible for marketers and editors. The clear layout and straightforward navigation allow for managing website content without technical training.
SEO-Friendly Features – Umbraco includes built-in SEO tools that help users optimize their websites for search engines, like customizable URLs, meta tags, and sitemap generation.

Source: our.umbraco.com

Cons of Umbraco

Steep Learning Curve – New users may find the platform challenging, especially when dealing with advanced features or custom development. A solid understanding of .NET and web development principles is often necessary.
Smaller Ecosystem Compared to Competitors – While Umbraco has a dedicated community, its ecosystem is smaller than that of platforms like WordPress. This can result in fewer available plugins, themes, and third-party integrations.
Higher Development Costs – Due to the need for specialized .NET development skills, building and maintaining an Umbraco site can be more expensive compared to platforms that rely on more commonly available technologies.
Complex Setup and Configuration – Setting up and configuring Umbraco can be difficult, particularly for large or customized projects. A significant time has to be spent on installation, module configuration, and site organization to achieve optimal performance.
Regular Maintenance Requirements – Maintaining an Umbraco site involves regular updates to the core system and extensions. It can be time-consuming and may require technical skills.
Potential for Compatibility Issues – With various plugins and custom integrations, users may encounter complex compatibility issues that aren’t easy to fix without specific knowledge.

Is Umbraco the Best CMS for Me?

If you have the necessary resources and want a very personalized CMS, Umbraco could be the ideal CMS.

Umbraco’s user-friendly interface allows editors to manage content on your website easily, and built-in SEO tools help improve search engine visibility.

On the other hand, its technical requirements can be a problem for users who don’t have the necessary knowledge.

Which CMS Will Be the Best for Me?

Finding the best CMS can be overwhelming. Each platform has its merits, depending on your needs, skills, and the type of website you’re building. Here’s a quick recap:

CMS	Flexibility	Scalability	Developer Skill Needed	Best For
WordPress	High (via plugins/themes)	Medium (plugin-dependent)	Low to Medium	Blogs, content-heavy sites, small businesses, SEO-focused marketing
Webflow	Limited (low-code)	Low to Medium (limited logic)	Low	Landing pages, marketing sites, portfolios, MVPs
Joomla	Moderate (built-in features)	Medium to High	Medium	Multilingual sites, membership platforms, community-driven projects
Drupal	Very High (custom modules)	High (enterprise-ready)	High	Government, nonprofits, enterprise portals, complex content structures
Umbraco	High (custom .NET development)	High (esp. in MS stack)	Medium to High	Corporate sites, .NET-based platforms, internal tools, enterprise apps

WordPress is a great choice for most users thanks to its ease of use, huge plugin ecosystem, strong SEO features, and active global community. It’s the most popular open-source CMS in the world and a reliable solution for everything from blogs to small business websites.

Webflow is ideal for marketers and designers who want full control over layout and visuals without writing code. It has an intuitive drag-and-drop interface that is great for creating landing pages, portfolios, and marketing sites.

Joomla offers more built-in flexibility than WordPress, especially for multilingual and access-controlled sites. However, it comes with a steeper learning curve and a smaller ecosystem, making it a better fit for terms with some technical experience.

Drupal and Umbraco are powerful options for developers and enterprises. They shine in projects that require high security, granular user permissions, and full control over structure and functionality, but both demand serious development resources to implement and maintain.

If you’re still unsure which traditional CMS might be the best fit for your site, reach out to us. Our experts can analyze your setup and point towards the most beneficial option for you.

F.A.Q

What Is a Traditional CMS?

A traditional CMS is an all-in-one content management system that handles both the backend (where you manage content) and the frontend (how it’s displayed to users). Platforms like WordPress, Joomla, and Drupal fall into this category, offering built-in templates, plugins, and page rendering without needing to separate content and presentation.

Is WordPress Still the Best CMS in 2025?

For many use cases, yes. WordPress remains the most popular CMS due to its ease of use, huge plugin ecosystem, and flexibility. It’s ideal for blogs, small websites, and content-driven platforms — but may not be the best fit for complex or enterprise-grade systems that need custom workflows or advanced scalability.

Which CMS Is Best for Small Businesses?

WordPress is a top choice for small businesses thanks to its affordability, wide theme selection, and large support community. Webflow is also a strong option for visually focused marketing sites that don’t require heavy custom development.

What CMS Works with .NET?

Umbraco is the leading .NET-based CMS. It’s built on modern .NET Core, supports full customization with C#, and integrates well with Microsoft Azure and enterprise tooling. It’s ideal for companies already using Microsoft technologies.

What’s the Difference Between WordPress and Webflow?

WordPress is an open-source, plugin-driven CMS with vast flexibility and support for everything from blogging to e-commerce. Webflow is a no-code design platform that lets you visually build static and dynamic websites. WordPress offers more extensibility and backend control, while Webflow is faster for launching design-first sites with minimal technical setup.

Sources

Usage Statistics And Market Shares Of Content Management Systems

Headless WordPress CMS – A Perfect Choice For a Marketer?

Best Use Cases of Sanity

Top 5 Best Headless CMS Platforms

Why Use React for Web Development in 2025: Top 7 Benefits

Chris Lojniewski — Thu, 08 May 2025 11:12:38 +0000

Is React a Good Choice in 2025?

Even with over a decade behind it, React is still leading modern front-end development for scalable web applications. However, since alternatives like Angular or Vue are gaining traction, it’s fair to ask why use React in 2025.

The answer lies in its maturity, flexibility, and ongoing innovation. React’s architecture has stood the test of time, and it’s still evolving to meet modern development needs. At Pagepro, we’re big fans of React development and continue to recommend it for most web development projects. Today, we’ll share with you 7 reasons why we believe that this library is still the best choice for web development in 2025.

What is React?

React is a JavaScript library for building user interfaces, free and open-source. At its core lies the concept of components, small and reusable blocks of UI that manage their state. They can be composed to build entire pages or applications. The inclusion of Virtual DOM lets React efficiently update the browser to improve both speed and responsiveness.

Facebook released it in 2013, and since then, the library has kept changing. The React 19 update arrived in December 2024 and introduced a few important changes to the library: Server Components, Server Actions, and new React hooks for easier state management. It made React faster and easier to use across the client and server.

React Use Cases

Many established companies have created sites and web-based React applications due to its unique architecture and flexibility. Since we could write a whole separate article on the topic, instead, we’ve prepared a few prominent examples.

Facebook

Facebook (now Meta) is the birthplace of React. The company uses the library across its web app development, including the main Facebook platform. React’s component-based architecture helps Facebook create dynamic and responsive interfaces. Its users can enjoy real-time updates from their friends and a great overall experience.

Instagram

Instagram, also a Meta property, uses React for its web interface and features like the feed and direct messaging. Due to React’s modular architecture, the platform can deliver a consistent and interactive experience to users accessing it via browsers.

Netflix

Netflix applied React in various parts of its platform, particularly for the user interface of its TV applications. Its role in the company’s web architecture shows the benefits of using React js in building modular and efficient UIs for large-scale applications.

The New York Times

The New York Times chose React development because of the interactive features and rich multimedia content on its website. React’s flexibility allows the publication to create dynamic articles, graphics, and updates, making the way readers consume news online more interactive.

7 Benefits of Using React for Web Development

React is a top choice for teams that need performance, flexibility, and long-term maintainability in modern web application development. To prove it, here are our 7 reasons to choose React in 2025.

1. Performance

In modern web application development, few things are as important as the best performance possible. React’s Virtual DOM and fine-grained rendering guarantee that only the components that do change get re-rendered. Server Components help large pages load faster and send less JavaScript to the client.

2. Speed & User Experience

Responsive experience is the major benefit of React. Fast re-rendering and dynamic UIs let you build high-performance web applications that feel native. New hooks like useOptimistic make user interactions smooth, even when data is pending. Pairing it with tools like React Query or SWR lets you manage server state without introducing potential performance blockers.

3. Backward Compatibility

Since its launch, React has been remarkably stable and continues to receive support from Meta and its community. What’s more, even major updates have emphasized backward compatibility. Older apps can continue working without full rewrites, making it perfect for large-scale teams that rely on long-term support.

4. Development Speed

Those who experienced fast-paced development environments or worked on an MVP know just how valuable quick iteration can be. The combination of component-based structure, hooks, and state management integrations with tools like Redux helps React greatly improve the speed of initial builds and maintenance. It supports modern stacks like TypeScript, fast refresh via Vite, and React frameworks like Next.js. Additional extensions like React Developer Tools simplify debugging and state inspection without slowing down the workflow.

5. Popularity & Community

The library remains one of the most widely used technologies in web development. It has over 235,000 stars on GitHub and a massive global community of developers eager to learn React. Developers building React web applications can count on fast answers, active forums, and a constant stream of up-to-date resources.

Source: React.js Github

A strong community support and a shared pool of knowledge makes it a low-risk option for the development process. Looking at Stack Overflow 2024 survey will show you just how prevalent this library is in development, as it ranked second among web frameworks and technologies, topped only by Node.js.

Source: Stack Overflow 2024 Developer Survey

6. Effective Testing

Thanks to the clear structure and predictable behavior of React components, testing becomes a natural part of development instead of an unpleasant responsibility*.* Each component can be isolated, rendered, and verified independently, improving quality control throughout the development.

Moreover, third-party tools like React Testing Library can help teams write tests that mirror real user interactions for their web pages. This improves reliability and maintenance and reduces the risk of getting caught up in implementation details.

7. Modularity

React scales amazingly across teams and projects because of its component-based structure. Breaking interfaces into small components allows developers to isolate functionality, reduce repetition, and maintain consistency. The components can then be reused no matter their initial purpose and then be tested and improved independently from the entire system.

While saving time is a big plus, this modularity also helps speed up collaboration. Teams can maintain shared libraries of reusable UI elements, so rolling out design updates or replicating features becomes easy.

When React is the Best Fit

React performs best in scenarios where performance and reusability matter. Its architecture is tailored for apps needing fast and consistent interfaces on top of dynamic content. Have a look at some examples of projects where it provides the best value for software development:

Single-page apps (SPAs) – React’s client-side rendering and efficient Virtual DOM work great for SPAs that need smooth navigation.
Interactive dashboards – Dashboards often use dynamic and modular elements to keep users informed. The component-based structure of React allows features like charts, real-time filters, or modular widgets. to be built and updated independently.
Real-time collaboration tools – Real-time features like whiteboards or editors are easier to manage with React, since it helps to maintain reactive, synchronized UIs across users without overcomplicating the logic.
SEO-optimized sites (via Next.js) – While React alone isn’t exactly SEO-friendly, frameworks like Next.js solve that by supporting server-side rendering and static site generation. Combined with Server Components, the library is a strong candidate for marketing sites or content-heavy platforms.
Cross-platform development with React Native – One of React’s biggest advantages is that its capabilities extend to mobile app development. Teams can build iOS and Android apps with React Native using much of the same logic and tooling.

Download our Ebook: 113 React Native App Examples

Admin panels and internal tools – React is perfect for fast, iterative development of tools like content editors or internal portals. Developers can iterate quickly by reusing elements across multiple screens and roles.
Component-based marketing sites – This library works very well with headless CMS platforms. Content teams can manage text and media, while developers maintain a consistent design system through reusable components.

React vs Other Frameworks

In 2025, the most common alternatives to React are Angular and Vue. As you can see below, each has its strengths and trade-offs:

Feature	React	Vue	Angular
Learning Curve	Moderate	Easy	Steep
Architecture	Unopinionated (build it your way)	Lightweight, mostly unopinionated	Opinionated, all-in-one framework
Performance	Excellent (especially with Server Components)	Very good	Good
Ecosystem	Extensive (Next.js, React Native, Vite, etc.)	Growing, strong for smaller projects	Large, but more rigid
Community Support	Very large, enterprise-proven	Passionate	Solid in enterprise, declining in web apps
Mobile Development	First-class support via React Native	Limited via wrappers like NativeScript or Capacitor	Supported through Ionic (not native performance)
Use in Large Projects	Widely used (Meta, Shopify, NYT, WhatsApp)	Gaining traction, often used in smaller teams	Still strong in some enterprise/government apps
Flexibility	High	High	Low

If you’re trying to choose the right tool for your team, we’ve written two comparisons, which will help you choose the best tool for your development team:

Should You Use React JS?

If you’re deciding which technology to invest in for your next web development project, React JS is still one of the safest choices. It balances performance, stability, and productivity in a way that very few tools do. Businesses looking to create future-proof apps will appreciate its continued innovation and the support it receives both from Meta and its community.

React is a great choice for teams of all sizes and industries. Regardless of the type of web and mobile applications you want to create, in most cases, it will support your needs better than the alternatives.

If you need help creating your dream React.js project, we’re here to help you! Don’t hesitate to contact us.

F.A.Q

Why use React instead of other frameworks in 2025?

The library balances speed, flexibility, and scalability better than most tools. It’s ideal for building anything from prototypes to large-scale production apps.

Is Redux still relevant with React?

Yes. Redux continues to be used in complex apps that require predictable global state. That said, React’s evolving features and newer libraries offer leaner options where Redux might be overkill.

Can I use React for mobile development?

Yes, it’s possible by using React Native. It’s based on the same principles and component model as the library itself. Developers can use it to build cross-platform apps for iOS and Android using JavaScript and React.

Is React still actively maintained?

Very much so. It’s last update launched in December 2024 and introduced major improvements like Server Components and Server Actions.

Optimizing Vercel Hosting Costs

Chris Lojniewski — Mon, 10 Mar 2025 10:10:30 +0000

Introduction

Using Vercel is a popular choice for hosting apps, thanks to its ease of use and support for Next.js framework. This hosting platform can accommodate even large traffic spikes and different use cases. However, as your projects scale their hosting costs can grow as well and have you look elsewhere for a different hosting provider.

Still, there’s a way to limit how much you’re spending on cloud hosting and make Vercel support the budget of your Next.js app. Even small adjustments to the code, how you configure your project settings, deploy your project, or how often check the dashboard can make a difference.

In this step-by-step guide I’ll introduce you to smart strategies we’re using to lower hosting expenses, and help you decide when staying on a Pro subscription is the best choice, and when upgrading to Enterprise is necessary.

Chris Lojniewski and I held a live session on this subject, which included a live demo of the optimizations I’ll be describing in the article. You can watch it here.

Now, let’s start by breaking down what affects your Vercel hosting bill.

Factors Driving Costs in Vercel

We can divide the factors influencing your costs into Fixed-Price and Usage-Based.

Fixed-Price Factors

These stay roughly the same each month, as Vercel sets their price for all users.

Plan Selection – When starting a new project, choosing the right plan matters, especially if you’re too big for the generous free tier Vercel offers. Before you start the deployment process, ensure your plan aligns with your expected usage so your project can be deployed quickly and securely. Hobby, Pro, and Enterprise plans have different pricing structures and limits. The Pro plan includes additional resources but charges for overages, while the Enterprise plan offers custom pricing based on usage.
Number of Seats – Vercel charges per seat for users needing access to the dashboard. Make sure that only necessary team members have access to your repository or use automation (e.g., GitLab CI/CD or GitHub Actions for deployment, which I’ll talk about more later).

Usage-Based Factors

This type of costs can rise or fall, depending on your setup and decisions.

Execution Time – You’re billed based on the total time serverless functions take to execute. Vercel’s automatic scaling helps optimize performance by adjusting resources based on traffic demand.
Invocations – Each time a serverless function runs, it becomes an invocation. High invocation counts can quickly increase costs, particularly if middleware, API routes, or unnecessary prefetching is triggering multiple function calls. You can avoid this by limiting function calls and caching responses where possible.
Bandwidth – The volume of JavaScript bundles, images, API responses, and any external asset loads transferred between users and the server contributes to costs. Compressing assets, reducing data payloads, and utilizing caching strategies can reduce bandwidth expenses.

Once you become aware of what affects your bill, you can start working on lowering it. To help you, I’ve prepared a list of the code optimizations we’ve been using in our projects, which you can implement as well.

Lowering Hosting Costs with Code Tweaks

Sometimes smart and strategic choices and taking advantage of Vercel as the easiest way to deploy Next.js applications without breaking the bank. Below are the examples of code-level adjustments we’ve been using in our projects to lower the costs.

Choosing the Optimal Rendering Method

Rendering methods play a significant role in shaping your hosting costs. Using Static Site Generation (SSG) is an effective way to minimize execution costs and reduce unnecessary deploying. It lets you shift processing from runtime to build time, a particularly useful feature for content that does not change frequently.

Server-Side Rendering (SSR) on the other hand, should be used sparingly, as it adds new execution costs with every page request. Incremental Static Regeneration (ISR) balances the two by allowing updates to static content at scheduled intervals. This reduces unnecessary function executions while keeping content fresh.

Minimizing Data Transfer

Large API payloads can lead to increased bandwidth usage and higher costs. Efficient query techniques, such as database-level aggregations instead of frontend filtering, can significantly cut down on data transfer.

getStaticProps applied for pre-building pages rather than fetching data at runtime stops users from repeatedly triggering API requests. This further reduces bandwidth consumption, but limiting the props passed to pages can also decrease data transfer volumes and improve page load times.

Optimizing Prefetching

Knowing how to optimize prefetching is crucial in controlling function invocations. Next.js prefetches links by default, which can lead to excessive function executions when multiple pages are loaded in advance. While this improves performance, it can also increase costs unnecessarily, a common problem in the modern web development process.

Disable prefetching for non-critical pages or implement hover-based prefetching to balance top performance and cost efficiency.

Function Optimization

Function execution time directly impacts hosting expenses. Optimizing its performance is key to savings. Instead of making multiple sequential API requests, parallelize requests using Promise.all() to reduce execution time.

Database queries should also be optimized to minimize expensive calculations within API functions. Offload long-running processes like PDF generation to background jobs outside Vercel and implement caching strategies to limit unnecessary API requests, so frequently accessed data is served efficiently.

Reducing Middleware Executions

Badly managed middleware executions can accumulate unnecessary costs. Implementing route matchers makes middleware run only when required, lowering strain on the back-end and preventing excess function executions. Static assets should be excluded from middleware processing to optimize performance and reduce costs.

Regex filters can further refine when middleware is executed, allowing developers to fine-tune application behavior without incurring excessive execution charges. Here’s how you can do it:

export default async function middleware(request: NextRequest) {
 if (!request.nextUrl.pathname.startsWith("/protected")) {
   return NextResponse.next();
 }


 // OTHER MIDDLEWARE ACTIONS


 return NextResponse.next();
}


export const config = {
 matcher: [
   "/((?!api|_next/static|_next/image|favicon.ico|assets|.*\\.png$).*)",
 ],
};

Optimizing Vercel Dashboard

Vercel Dashboard View

A lot of the savings for your app can be found in the Vercel dashboard settings, depending on how you want to deploy it.

Setting maximum execution time for functions helps prevent excessive processing costs. This ensures that long-running functions do not consume unnecessary resources, avoiding unpredictable costs caused by inefficient execution loops.
The Fluid Compute feature is another valuable addition Vercel offers. It allocates resources to functions, which helps balance cost and performance by optimizing resource utilization based on demand. Enable it in your app to test the potential gains it might offer.
New image optimization pricing has changed Vercel’s billing approach. Instead of charging based on the number of images transformed, costs are now tied to transformation actions. However, the platform still supports a variety of optimization strategies. Teams should review their image processing workflows and limit unnecessary transformations.
Performing front-end bundle analysis using tools like Lighthouse and Webpack Analyzer helps identify and eliminate unused JavaScript and CSS, reducing page load times and bandwidth consumption. Streamlining bundles ensures assets are delivered without adding to hosting costs. Taking advantage of features of Next.js, such as automatic code splitting and tree-shaking, can help you further optimize performance.
Remember to allocate only the necessary resources for each function. You’ll be able to avoid over-provisioning, reduce execution time expenses, and properly set a custom domain without unnecessary redirects or misconfigurations. Regularly monitoring and fine-tuning these settings will help you match actual usage needs to avoid overpaying.

Alternatives to Vercel Premium Features

Lowering reliance on Vercel’s premium features like image optimization through alternatives can lower your costs while maintaining a high-performing app.

Limiting seats using solutions like GitHub workflows is an effective strategy. Instead of granting all team members direct access to the Vercel dashboard, teams can configure GitHub Actions to automate Vercel’s deployment. This removes the need for additional paid seats but also restricts real-time monitoring, debugging, and direct deployment control.
Image optimization is another area where external solutions can help cut expenses on Vercel. The platform integrates seamlessly with third-party CDNs (Content Delivery Networks) and CMSs (Content Management Systems) which makes it easy to reduce reliance on Vercel’s image handling if you are already using one of these.
Built-in analytics tools can also be replaced with third-party solutions like DebugBear, SpeedCurve, or web.dev.
For password protection, instead of using Vercel’s built-in feature, you can implement middleware-based authentication. Redirecting users to a custom authentication route lets developers control access without incurring extra Vercel costs.

How to Implement Password Protection with Middleware

To implement password protection outside of Vercel’s built-in tools, you’ll need to do three things. First is the setting of the middleware, which will check your password. Start by updating your middleware file with this code:

import { NextRequest, NextResponse } from "next/server";


function checkForPassword(request: NextRequest) {
 const hashedPassword = request.cookies.get("site-access")?.value;
 const envPassword = process.env.SITE_PASSWORD;


 if (!envPassword) {
   return null;
 }
 // You should use a better hashing algorithm here
 const hash = (str: string) => Buffer.from(str).toString("base64");


 if (!hashedPassword || hashedPassword !== hash(envPassword)) {
   const response = NextResponse.rewrite(
     new URL("/password-check", request.url)
   );
   response.cookies.set("requested-path", request.nextUrl.pathname);
   response.headers.set("cache-control", "no-store, must-revalidate");
   response.headers.set("x-middleware-cache", "no-cache");


   return response;
 }
}


export default async function middleware(request: NextRequest) {
 const redirectResponse = checkForPassword(request);


 if (redirectResponse) {
   return redirectResponse;
 }


 return NextResponse.next();
}


export const config = {
 matcher: [
   "/((?!api|_next/static|_next/image|favicon.ico|assets|.*\\.png$).*)",
 ],
};

Now that this is ready, it’s time to set up the page which will prompt for a password. Create a file in the /app/password-check/page path and type this:

"use client";


import { useState } from "react";
import { useRouter } from "next/navigation";


export default function PasswordCheck() {
 const [password, setPassword] = useState("");
 const [error, setError] = useState("");
 const router = useRouter();


 async function handleSubmit(e: React.FormEvent) {
   e.preventDefault();


   try {
     const response = await fetch("/api/password", {
       method: "POST",
       body: JSON.stringify({ password }),
     });


     if (!response.ok) {
       throw new Error("Failed to validate password");
     }


     const requestedPath =
       document.cookie
         .split("; ")
         .find((row) => row.startsWith("requested-path"))
         ?.split("=")[1] || "/";


     router.push(requestedPath);
   } catch {
     setError("Invalid password. Please try again.");
   }
 }


 return (
   <main className="grid place-items-center min-h-[100vh] bg-gray-50 p-4">
     <div className="w-full max-w-sm space-y-4">
       <h1 className="text-3xl font-bold text-center text-gray-900">
         Access Forbidden
       </h1>
       <p className="text-sm text-center text-gray-600">
         This page is protected by password. To access the site, please ask the
         administrator for the password and type it below.
       </p>


       <form onSubmit={handleSubmit} className="space-y-4">
         <input
           type="password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           className="w-full px-3 py-2 border rounded text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-indigo-500"
           placeholder="Enter password"
         />


         {error && <p className="text-red-500 text-sm text-center">{error}</p>}


         <button
           type="submit"
           className="w-full py-2 px-4 bg-indigo-600 text-white text-sm font-medium rounded hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
         >
           Submit
         </button>
       </form>
     </div>
   </main>
 );
}

The last step is to create an API request for password verification since client logic doesn’t have access to environment variables. Create a new file in the /api/password/route path and type:

import { NextRequest, NextResponse } from "next/server";


export async function POST(request: NextRequest) {
 try {
   const { password } = await request.json();


   if (password !== process.env.SITE_PASSWORD) {
     return NextResponse.json(
       { message: "Invalid password" },
       { status: 401 }
     );
   }


   const response = NextResponse.json(
     { message: "Password valid" },
     { status: 200 }
   );


   // Set secure HTTP-only cookie with base64 encoded password
   response.cookies.set({
     name: "site-access",
     value: Buffer.from(password).toString("base64"),
     httpOnly: true,
     sameSite: "strict",
     path: "/",
   });


   return response;
 } catch {
   return NextResponse.json(
     { message: "Error validating password" },
     { status: 500 }
   );
 }
}

Bear in mind, this is not the perfect solution for apps requiring high security. Companies that need to adhere to strict standards or handle sensitive information might be better off using Vercel’s built-in protections. Speaking of…

When Do You Need Vercel Enterprise?

Source: Vercel

Time to discuss the elephant in the room – is upgrading to Enterprise necessary for growth? The answer depends on what your project requires.

Vercel Enterprise is designed for businesses that need security, scalability, dedicated support, and advanced features. While the Pro plan is enough for most applications, Enterprise offers additional features for high-traffic, compliance-driven, or mission-critical applications.

You’ll Need Enterprise If:

More Support is Necessary

Enterprise customers receive dedicated customer support with service level agreements (SLAs) guaranteeing uptime and response times. This level of support could be a good investment if your app relies heavily on uptime and fast troubleshooting.

You’re Constantly Exceeding Pro Plan Limits

In case when a project exceeds Pro plan limits in execution time, bandwidth, or function invocations, Enterprise can provide a more flexible usage allowance with a custom pricing option. This can be the less expensive option compared to paying for overages on the Pro plan.

Security and Compliance Are a Must

Compliance standards like SOC 2, ISO 27001, and HIPAA require strict data handling policies that Enterprise plans support. Single Sign-On (SSO), role-based access control, private networking, and dedicated infrastructure could be needed if your organization handles sensitive data.

Source: Vercel

Advanced Performance Optimization Options Can Help Your App

Enterprise users have access to additional performance improvements. This includes enhanced CDN configurations, lower cold start times, and priority deployment processing for faster build times.

Custom Billing and Procurement is Important to You

Larger companies often require flexible billing arrangements, invoicing options, and procurement workflows aligning with internal procedures. Vercel Enterprise allows for custom contracts, bulk seat management, and additional auditing capabilities.

Enterprise Won’t Be Necessary If:

You’re Running a Small to Mid-Sized Project

Vercel supports the hosting and deployment of a variety of apps, from personal projects outgrowing the Free plan, to e-commerce sites. All of them can run efficiently on the Pro plan without requiring the additional features of Enterprise.

The App You’re Working on Is Cost-Sensitive

If budget control is your priority, explore cost optimizations within the Pro plan, like reducing function executions, optimizing data transfer, and limiting seats. It can be a better (and more affordable) solution than upgrading to Enterprise.

There Are Alternative Hosting Solutions You Can Pursue

In a situation where Vercel’s pricing becomes unsustainable at scale, you might consider alternative hosting solutions. Self-managed cloud infrastructure (AWS, GCP, Azure) or hybrid deployments that combine Vercel with other providers for cost efficiency can be a good investment.

Before deciding on upgrading, carefully evaluate your business requirements, traffic volume, and budget constraints. Only then you’ll know if Vercel Enterprise will provide you with a better value than sticking to Pro plan.

Conclusion

Vercel has evolved over the years to accommodate different Next.js apps in modern development. Keeping it affordable comes down to making smart choices. Simple tweaks to rendering, function execution, and dashboard settings can save your budget.

It’s important to remember that your subscription matters. For most projects, the Pro plan is enough with the right optimizations, but if security, compliance, or heavy traffic are concerns, Enterprise might be the better, and sometimes even more affordable fit. As long as you understand your usage and align your hosting strategy with business goals, Vercel makes hosting cost-effective for your Next.js applications, whether you’re working on a small project, web application, or a big venture.

18 Tips For a Better React Code Review (TS/JS)

Chris Lojniewski — Mon, 03 Mar 2025 08:12:08 +0000

Introduction to ReactJS Code Review for Developers

If you’ve worked with React, you’re likely familiar with the code review process in frontend. If not, here’s a quick breakdown: it’s a practice that improves code quality, catches bugs, and keeps the team aligned with project updates.

There are a few ways to improve your React code review, and I’ll share them with you. I’ll point out what you should look for during the process and how to provide useful comments instead of non-answers like “change A to B”.

Before we move on to that, let’s start with a simple question.

What Is the Goal of the React Code Review?

Catching bugs and producing high-quality work are important parts of code reviews. However, the main focus should be on sharing knowledge and boosting the confidence of your team.

Accepting a pull request should be seen as recognition of a job well done, and reinforce a positive team environment. A good code review should include a showcase of changes made to the project, so other devs can stay informed about the ongoing development of React components, along with feedback sessions. These encourage exploring different approaches to problem-solving and help mentor less experienced React devs.

Things to Consider Before a Code Review

Not all code reviews are the same. Your approach will depend on how familiar you are with the project. If you’re part of the team working on the codebase, you have the advantage of knowing the context, patterns, and potential pitfalls. This makes it easier to catch functional issues, ensure backward compatibility, and improve overall code consistency.

However, If you’re evaluating a project you haven’t worked on before, don’t stress about missing certain details. You don’t have to know every decision behind the code structure. Focus on asking questions when something isn’t clear. Curiosity is key to providing meaningful feedback. If you spot a problem, great! If not, your role is to ensure the submission is readable, maintainable, and follows best code practices.

Setting Rules

Before jumping into a code review, it helps to establish some basic rules. Having a structured process makes reviews more efficient, reduces frustration, and ensures that feedback is constructive. Here are a few ground rules I’ve set up for myself and my team:

Lint the Code Before Submission – Linting is the process of analyzing code to identify potential errors, coding style violations, and other issues. It helps improve code quality, catch bugs early, and promotes consistent coding standards across the project. If developers actively run linting and fix issues before submitting their code, it makes the review process easier for the team.
Self-Review Before Submitting – It’s important for developers should review their code directly on the platform before sharing the link with a reviewer to minimize unnecessary comments, console.log statements, formatting issues, and other leftovers.
Include a Description in the Pull Request – A summary helps the reviewer understand the context. It doesn’t need to be overly descriptive, just enough to give context.
Attach Screenshots for UI Changes – Sometimes it’s a good idea to send some screenshots, so the reviewer doesn’t have to run the project (unless they have to test it).
Avoid Large Pull Requests – The more files in a PR, the fewer comments it will get, and nobody has time to review hundreds of changes in detail. If a feature is large, create a separate branch for it and break it into smaller sub-branches with focused changes.

Best Practices for Code Review

Beyond just setting rules, a good review requires a thoughtful approach:

Be Communicative

Like in a real conversation, how and when you deliver your feedback is very important:

Offer Explanations – Don’t just demand changes, explain why they’re necessary so the engineer whose code you’re reviewing can learn from the process.
Point Out Good Work – Offer praise where it’s due to keep your teammates motivated.
Mention When You’ll Review the Code – Even experienced React developers can have a tendency to wait for feedback before starting other work. Let your teammate know when you’ll be able to take care of it, and if you are too busy for an in-depth check, mention it too.

Categorize Comments

A good way to keep feedback clear and constructive is to divide comments into three types:

Major – These are critical issues devs have to fix before merging. They could break the app, cause regressions, or fail to meet requirements.
Minor – Suggestions for improving readability, reusability, or general code quality. If the developer has a solid reason for their approach, it’s okay to leave things as they are.
Optional – Small tweaks like formatting or syntax updates that don’t affect functionality.

Stay Organized

Even if ten other developers are reviewing the same code, it’s still your responsibility to offer it your full attention:

Make Comments Visible – While transparency is an important factor in building trust, having everyone up-to-date about suggested changes is just as valuable. The comments should be visible to everyone involved in the process to avoid feedback loss.
Don’t Waste Time on Repeating Styling Issues – In my experience, most comments in React code reviews are about styling issues. If you encounter styling concerns throughout the React codebase, address them once, and propose solutions to avoid leaving the same comments on each request.

18 Tips for a React Code Review – Checklist

A checklist can make reviews more systematic and prevent common issues from slipping through. Have a look at the overview of what to keep in mind for a better React code review:

Download a checklist for a better code review

Check if there are any new npm packages added.
Ensure there are no functionality duplicates like date-fns + moment.
Look for imports. Sometimes tree shaking might not work as expected, and there’s an option to bundle the whole library with a single method:

import _ from 'lodash';
//should became more precise import like:
import uniq from 'lodash/uniq';

If your app uses translations, see if all new areas have also been translated. If not, point that out and the developer should be aware of that in the future.

const NewComponent = () => {
  return (
    <div>
      New static text inside new component should be translated!
    </div>
  )
}

Check for missing or invalid types if you are using TypeScript. All “ANY” types should also be fixed unless you have a really, really good explanation for not doing so. Below we have missing props types and any in the method.

const NewComponent = ({items, data}) => {
  const getItemId = (data: any) => data.id
  return (
    <div>
      {items.map(item => (
        <span key={getItemId(item)}>
          <h1>{item.title}</h1>
          <p>{item.description}</p>
        </span>
      ))}
    </div>
  )
}

See variables, functions, and naming conventions. They should all declare their name and function
For boolean values, use prefixes is/are/should to declare their behaviour (visible => isVisible) so they won’t be treated as HTML properties.
Make sure functions declare their purpose; if they return anything, name them accordingly. For example, if they manipulate data: updateUsers => addUniqId, parseData => parseToAPIFormat, etc.
Look for weird logic patterns. Sometimes when a dev spends too much time on a task, they get creative with the code and develop methods or flows that have no sense and can affect the project structure.
Are code chunks too complicated? If someone is adding an ID into an array using 20 lines of code instead of 1, let them know why they shouldn’t do that.
If you can’t understand what a specific chunk of code is doing, request an explanation from the developer to clear out any potential confusion.
Avoid hard-coded values. Check for hardcoded names, paths, and values in the code. Instead of embedding them directly, store them in constants or configuration files so they can be updated in one place.
Maintain backward compatibility. Keep an eye out for changes that could break existing functionality, such as making optional props required or modifying function parameters. In TypeScript, these issues trigger compilation errors, but in JavaScript, they must be tracked manually to prevent unexpected failures.
Ensure there’s no code repetition. If you’ve seen the same/similar logic in multiple places, point that out.
Check for missing form validations or incorrect form validations. I’ve never seen React apps that have a form without field validation.
Be aware of missing error handlers from API responses to provide appropriate feedback to users. Pay attention to try/catch blocks and their handling in catch.
Optimize async methods. Decide whether async methods can run in parallel or need to execute in sequence, making sure that required data is properly awaited.
Learn from your mistakes. Mistakes are part of the process, but they don’t have to be repeated. If you spot something you’ve struggled with before, use that knowledge to steer things in the right direction.

Summary

In the dev community, the reviewing process should be treated as a great way to provide general coding knowledge. A structured review process improves code quality, encourages insight sharing, and strengthens relationships in the team. While it does help provide feedback, it shouldn’t focus on pointing out issues, but on suggesting solutions and keeping the process productive. Explaining why something needs to change helps developers improve faster, and small wording tweaks can make feedback more constructive.

DEV Community: Chris Lojniewski

Best CMS in 2025: Sanity vs WordPress

Sanity and WordPress for Content Management

Headless CMS vs Traditional CMS

Overview of Sanity and WordPress

What is Sanity CMS?

Who Owns Sanity CMS?

Use Cases of Sanity

What is WordPress?

Who Developed WordPress?

Use Cases of WordPress

What is the Difference Between Sanity vs WordPress for Developers?

Content Modeling

Pricing

Performance

Integrations

DevEx & UX

Workflows

Security

Hosting

Sanity: Pros and Cons

What Are the Benefits of Using Sanity?

What are the Cons of Sanity CMS?

WordPress: Pros and Cons

What Are the Benefits of Using WordPress?

Disadvantages of a WordPress Site

When to Choose Sanity vs WordPress

WordPress and Sanity: Which CMS is Best for You?

FAQ

Is Sanity Free or Paid?

Is WordPress Still The Most Popular CMS?

Which CMS Is Better Than WordPress?

Is Sanity Better Than WordPress?

Can You Self-Host Sanity CMS

Is Sanity Open-Source?

Read More

Sources

How to Build a Music Streaming App with React Native

Introduction

React Native Track Player

Features of React Native Track Player

Native Modules

Why Choose React Native Track Player?

Platform Support

Stream Types

Casting

Miscellaneous

React Native Track Player functions

Player

Queue

Building React Native Spotify

Features of Your App

Creating A Simple Music Streaming APp

Add Service

Add Player Playlist

Create Track List

Create Player

Getting it all together

Summary

FAQ

Is React Native good for building apps like Spotify or Apple Music?

What is the best library to build a music streaming app in React Native?

Does React Native Track Player support offline playback?

How do I add background audio playback in React Native?

Read more

Sources

What is Next.js Framework and Why Should You Use It in 2025?

Why Choose Web Development with Next.js?

What is Next.js and Why Is It Used?

How Next.js Works

What’s New in Next.js 15

Features of Next.js

Hybrid Rendering

Serverless and Edge Functions

Incremental Static Regeneration (ISR)

File-Based Routing

API Routes

Built-In Image Optimization

User Experience and Search Engine Optimization in Next.js

What is Next.js Used For?