For startups and enterprises, there is a constant struggle to keep moving faster while the internal systems are growing in complexity. Nothing is more true when it comes to products that leverage content to grow, sell, or even survive.
Web applications (built on JS frameworks such as React) that need to impress users, as well as Google, have benefited from the recent “Back to the Roots” strategy of moving back to Server-Side Rendering v/s Client-Side Rendering. JS frameworks such as NextJS, Angular, and VueJS bring the much needed dynamic components needed while rendering the website statically or on the server-side. This helps the website get in good books with search engines as well as improve its User Experience (UX) at the same time.
To power a dynamic website that is built statically, the product needs an equally strong CMS, preferably a headless CMS such as Sanity. Keeping the same in mind, I shall cover the following in this blog:
- What is NextJS?
- What are the benefits of using NextJS?
- What is a headless CMS?
- What is Sanity and what makes it better?
- Why do Sanity and NextJS together improve timelines and cost?
- Where can NextJS and Sanity be used together?
What is NextJS?
NextJS is a framework built on ReactJS, a JS framework, to develop dynamic web applications. ReactJS defaults to Client-Side Rendering, i.e. if you use the create-react-app approach — a Single Page Architecture (SPA) to be precise.
To build applications that are built statically — essentially those frontends wherein the HTML and CSS is generated at build time — you need help of a framework built on top of React such as NextJS and GatsbyJS. While both are great choices, GatsbyJS is used to create statically rendered Websites and NextJS is typically used for more complex Web applications especially where ISR (Incremental Static Regeneration) is used.
What are the benefits of using NextJS?
NextJS is arguably the most popular React framework currently, and is used by startups and enterprises alike. While the project is actually open-sourced, the parent company — Vercel which manages NextJS is a well funded company that has created an ecosystem of No-Ops for frontend developers.
Vercel takes care of CD/CI (Continuous Deployment and Integration), Hosting (on it’s own CDN network), Analytics, and more bundled into one. All the frontend developers need to do is some configuration and connect their git repositories — through Github, GitLab, or Bitbucket and it’s done.
In the latest release of NextJS, Vercel also launched the ability to support edge functions i.e. the option to execute serverless functions without even needing a serverless environment to manage (such as AWS Lambda). This greatly improves response times and therefore user experience such as when checking if a user has a valid session or not.
At SoluteLabs, we have taken advantage of a multitude of features that NextJS provides out of the box and have reduced our development time and therefore costs for our clients.
Also, read: 10 Ways to Improve Your Next.JS App Performance
What is a headless CMS?
To dynamically or statically inject content into a JS framework such as NextJS — one needs to power the same via APIs (since the frontend and the backend are decoupled). These APIs can be served in a number of different ways:
- Building your own Web App
- Converting an existing WordPress site into a headless one
- Use a self-hosted open source CMS
- Using a managed CMS
Now, building your own Web app gives you the maximum flexibility and control over the web application but it is also the most resource intensive — both from a time and cost perspective. In many ways, it is akin to re-inventing the wheel and makes little sense from a RoI (Return on Investment) perspective. Unless your requirements are super niche — such as integration of AI/ML or GPT-3 into your content management system, I wouldn’t advise you to go ahead with this approach.
Assuming you already have a WordPress site, which is built well, and your team is already well versed with the CMS — your first reaction would be to use the same backend to power your new NextJS frontend. While this could work for many, there are some caveats here.
- If the WordPress backend isn’t structured properly, you will have a hard time exposing it neatly into APIs that can be used by any frontend — be it web or mobile.
- WordPress is known to have security flaws and keeping it upto date and secure is something that requires effort on a regular basis.
- Furthermore, WordPress is not known to be super friendly when it comes to integrating third party APIs natively through SDKs and such so while the plugin ecosystem is large, you have to rely on third party developers to integrate the SDK into WordPress which is a risk large organizations will not be ready to take.
- Finally, you will need people working with two different skill sets: one who knows NextJS and the other who knows WordPress. You won’t find someone who is proficient in both.
Which brings me to the final two options: use a headless CMS but one is self hosted and open sourced while the other is a managed service. While both are great options, if you opt for a NoOps approach then while the frontend is managed via Vercel — it makes the most sense to use a managed service for the backend (which doesn’t kill you with it’s pricing)
What is Sanity and what makes it better?
Sanity is a managed CMS that has a lot of powerful features baked in — from process and editorial flows to content calendars and third party integrations that makes development much flexible. Sanity exposes GraphQL APIs, and is easily integrated into NextJS and other frameworks through SDKs.
While it is developer first, Sanity brings in a lot of cool features such as real-time collaboration, content distribution, advanced image editing capabilities, and more into one platform that is absolutely free to begin with.
We have implemented Sanity as a CMS for enterprises and startups alike — even when Content was at the centre of the products that we were designing and developing, not just for simple websites and blogs. We have powered Online Media webapps, content focused websites, marketing websites, mobile apps, and more with Sanity as it’s backbone.
Why do Sanity and NextJS together improve timelines and cost?
Together, Sanity and NextJS are both managed, open sourced, and No-Ops solutions that improve developer velocity and productivity so that they can focus on what matters most — developing features that users want.
Sanity also provides a ton of resources to get developers started on their project and I can say from our experience that it has been really easy to get started. Using the SDK provided by Sanity, one can easily access the data from the CMS onto the NextJS frontend — couple it with a CSS framework such as TailwindCSS and you should be good to go!
Where can NextJS and Sanity be used together?
Sanity and NextJS can be used to power simple marketing websites to entire suite of web applications such as Media houses, high traffic websites and blogs, and more. At SoluteLabs, we have helped many clients (including our own blog) in different domains to ship production applications supported using Sanity and NextJS, some of them are:
Revamp of a Leading History Website
Live History India is india’s most prominent website when it comes to learning about history: places, books, people, and more. The site, originally on WordPress was migrated to Sanity and NextJS on the frontend to bring a superior UX to the end customers. Sanity powers thousands of articles while NextJS delivers them to end customers in a fraction of the time WordPress used to take.
Link: https://www.livehistoryindia.com/
Emotional Wellbeing App for Healthcare Professionals
We designed and developed a web and mobile app for Roche (a leading pharmaceutical company) in their endeavour to help medical professionals with their mental wellbeing. We helped the client setup a content management system that not only powers their web app (made using NextJS) but also their mobile apps that we created using Flutter
Link: https://www.reach4health.org/
Playstore: https://play.google.com/store/apps/details?id=com.roche.reachapp&hl=en&gl=US
Appstore: https://apps.apple.com/in/app/reach-roche-wellness-app/id1590305349
Listing App for a Council in UK
Created an app for the middlesbrough council in the UK during the COVID times to help local businesses get visibility through the app. The app was powered by Sanity on the backend for content and a Flutter app on the frontend.
Originally published at solutelabs.com.