We've developed a demo project 🚀 to test Sanity's Visual Editing and Live Preview features with NextJS. In our article 📝, we share insights from this experience, aiming to engage both developers and content creators 👩💻👨💻.
Key highlights include streamlined content management 📊, real-time updates ⏱️, and enhanced workflow efficiency 💡. Experience these benefits firsthand through our live demo here 🌐 and by exploring the deployed Sanity Studio here 🎨.
- Visit the live project here.
- Interact with the overlays to understand the visual editing features.
- Click an overlay to be automatically redirected to the corresponding document in Sanity Studio with the editing field opened for immediate editing.
- Observe the changes in real-time with the live preview.
Our article, "A Deep Dive into Sanity's Visual Editing and Presentation Tool: The Developer View," offers insights into the benefits and technical aspects of using Sanity Studio for visual editing and live preview in web development. It emphasizes the synergy between Sanity's content architecture and the dynamic capabilities of NextJS.
- Sanity Studio: The central content management system, enabling dynamic content updates and management with rich visual editing features.
- NextJS: Powers the frontend, facilitating the Live Preview feature by integrating seamlessly with Sanity.
- Vercel: Used for hosting, enhancing the visual editing experience with efficient deployment and scalability.
- Sanity Overlays & Content Sourcemap: Innovative features that add context and interactivity to the visual editing process. [More about Sanity Overlays][placeholder].
The project showcases how Sanity's live preview and visual editing capabilities can enhance the content creation and development process. With real-time updates and an intuitive interface, content creators and developers can collaborate more effectively.
To run the development server, follow these steps:
- Clone this repository.
- Install dependencies by running
npm installoryarn install. - Start the development server with
npm run devoryarn dev. - Open http://localhost:3000 in your browser to see the result.
- Access the Sanity Studio locally at http://localhost:3000/admin.
- Edit the
app/page.tsxfile to make changes. The page auto-updates as you edit. - Provide your own project ID in the
/sanity/config.tsfile.
Don't feel like setting up a new Sanity project from scratch? No worries! You can dive right into our Sanity Studio and see the magic firsthand. Just drop me a message on Twitter or reach out in the Sanity Community Slack. I'll get you an exclusive invite! But remember, with great power comes great responsibility... to edit content responsibly! 🕷️
This project is built using NextJS, focusing on the app router and the Static Site Generation (SSG) approach. The NextJS app router facilitates efficient page routing and dynamic content rendering, while the SSG approach enhances performance, SEO, and scalability.
The project utilizes a robust stack of key technologies:
- Next.js: 14.0.3
- React: 18.2.0
- Sanity Client (@sanity/client): 6.4.9
- next-sanity: 6.0.3
- Linaria (@linaria/core): 4.5.4
- next-with-linaria: 0.5.1
- rxjs: 7.8.1
- Node.js: 18.18.0
- TypeScript: 5.2.2
These technologies have been selected to ensure optimal performance and compatibility for our visual editing and live preview features.
We love collaboration! If you're interested in contributing to this project, here's how you can get involved:
-
Fork the repository.
-
Create a new branch for your feature (
git checkout -b feature/AmazingFeature). -
Commit your changes (
git commit -am 'Add some AmazingFeature'). -
Push to the branch (
git push origin feature/AmazingFeature). -
Open a pull request.
We're excited to see your innovative ideas and contributions. Let's make web development more visually engaging together!
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 deep expertise in headless CMS, NextJS, and eCommerce, we deliver cutting-edge solutions that prioritize your business goals.
- Content-Centric Websites: We have deep experience in 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.