Welcome to the Next-Sanity Demo repository! This project showcases our cutting-edge solution for creating web applications using Headless CMS (Sanity) and Next.js frontend. With a powerful tech stack and dynamic page generation, this project demonstrates the capabilities of our solution.
- Next.js 13 with app router
- Sanity Headless CMS
- Linaria for CSS styles
- Hosted on Vercel
- Performance: Our solution ensures excellent performance, achieving green scores in core web vitals.
- Dynamic Pages: Say goodbye to editing code for creating new pages. With our CMS integration, you can effortlessly create new pages and customize their content.
- Page Composition: Easily compose pages by dragging and dropping pre-built components. Each component can be populated with content specified in the CMS.
- Live Preview: As you work with content in Sanity Studio, you can instantly preview the page with the current changes, ensuring a seamless editing experience.
- Visual Editing: No more searching for documents and fields in the CMS to edit specific elements. Our visual editing feature allows you to click on an element outline and automatically open the required document for easy editing.
- Static Site Generation (SSG) with Dynamic Elements: Leverage the latest Next.js feature to combine static and dynamic rendering on a single page. Deliver content to users with maximum performance.
- Incremental Static Regeneration: Our web hook connects Sanity Headless CMS with Vercel projects, triggering page regeneration upon content changes. This ensures minimal delay between content updates and production deployment.
- Automatic roll out: The ability to create and deploy an individual project with 0 configuration. The user receives an invitation to the newly created project to try it in action and get acquainted with all the new features.
At FocusReactive, we excel in performance and SEO optimization. Our demo project showcases our expertise in these areas, implementing a performance-wise development strategy and conducting necessary performance checks. We prioritize data fetching, separate code into server and client sides, and carefully manage the loading of resources, including the use of lazy loading and minimizing the amount of JS code executed during page loading. While the screenshots provided here serve as a visual representation, we recommend running the analysis using the provided link to have an own vision. For reliable results, we suggest running the analysis multiple times consecutively.
It is important to note that this page contains several performance-influencing elements, including multiple pictures, a significant amount of content received from the CMS, numerous animations, and JS code for navigation functionality. While these factors can typically have a negative impact on performance, we have designed our applications to overcome these challenges without compromising UX quality. If your app experiences any of these issues, there's no need to give up on performance. Instead, you can contact us and request our expertise in performance optimization to overcome these challenges.
The frontend is deployed on Vecel for public preview https://mvp-nextjs-sanity.vercel.app/
If you're interested in trying our new solution or have any questions, please feel free to reach out to us via our contact form at https://focusreactive.com/#mail-us. We would love to hear from you and discuss how our solution can meet your specific needs.
To run the development server, follow these steps:
- Clone this repository.
- Install dependencies by running
pnpm install. - Start the development server with
pnpm dev. - Open http://localhost:3000 in your browser to see the result.
- Start editing the page by modifying
app/page.tsx. The page will auto-update as you make changes.
This project utilizes next/font to automatically optimize and load Inter, a custom Google Font.
This project was created at FocusReactive - the expert consultancy for the modern web. We specialize in helping clients beat the competition and accelerate business growth. With a deep expertise in headless CMS, NextJS, and eCommerce, we deliver cutting-edge solutions that prioritize your business goals.
- Content-Centric Websites: We have a deep experience building extendable, SEO optimized content and marketing websites with advanced CMS integrations and analytics.
- Headless eCommerce: Our next-generation, content-rich, and performant online eCommerce websites come with end-to-end integrations to power your digital business.
- Headless CMS Consulting: We offer multi-channel CMS development, modeling, customization, and support to help you manage your content seamlessly across various platforms.
- Web Performance: Our experts can audit, transform the architecture, and optimize your website to meet the 100 SCORE Core Web Vitals for exceptional web performance.
If you're looking for expertise in headless CMS, NextJS, or eCommerce, get in touch with FocusReactive today. Visit our website at focusreactive.com to learn more about how we can help you accelerate your business growth.
This project is licensed under the MIT License. © 2023 FocusReactive.