After the launch of Next 13.4 (Stable App Router), we are now able to create fully optimized web apps and sites with Tailwind CSS integrated. In addition, the integration of Sanity CMS further enhances the development experience. Read this blog post to discover the great experience of using this powerful combination

Want to try out the latest stack?

Embracing Next 13.4 for Enhanced Web Development

Staying ahead of the curve in the ever-changing landscape of web development is critical. With the latest release of Next 13.4 (Stable App Router), developers now have a strong tool at their disposal to design fully optimized web apps and webpages. The combination of 

 provides a streamlined and efficient development experience. In this post, we'll look at the incredible possibilities of this integration and the benefits it provides to web development. So 

 and prepare to start on an intriguing dive into the inner workings of Next 13.4, Tailwind CSS, and Sanity CMS.

The Dynamic... Trio: Next.js, Tailwind CSS, and Sanity.

Next.js, a popular React framework, has revolutionized the way we build web applications. Its ability to render both on the 

, along with its support for static site generation and server-side rendering, makes it a formidable choice for developers.

Enter Tailwind CSS, a utility-first CSS framework that takes simplicity and flexibility to new heights. With its extensive collection of ready-to-use utility classes, Tailwind CSS allows developers to rapidly prototype and build responsive web interfaces with ease.

But here's where it gets even better: add Sanity CMS to the mix. Sanity CMS further enhances the development experience by providing a 

, real-time collaboration, and precise content querying. It serves as the content backend for your Next.js and Tailwind CSS-powered web apps, empowering you to manage and organize your content effortlessly.

Next.js, Tailwind CSS, and sanity form a dynamic duo that seamlessly complements each other's strengths. The combination provides developers with an optimized workflow, enabling them to focus on crafting engaging user experiences rather than wrestling with the complexities.

, the Stable App Router introduces new features and enhancements that further elevate the development experience. Let's explore some of the notable additions in this release:

Next 13.4 introduces a stable app routing system that optimizes the navigation experience for users. With this update, developers can create web apps and sites that offer seamless transitions between pages, resulting in a fluid and immersive browsing experience.

Performance is a critical aspect of any web application. Next 13.4 brings performance improvements, ensuring lightning-fast page loads and improved overall responsiveness. With these optimizations, users can enjoy snappy and smooth interactions, keeping them engaged and satisfied.

Gone are the days of loading bulky JavaScript bundles upfront. Next 13.4 introduces code splitting and lazy loading capabilities, allowing for more efficient resource allocation. With these techniques, only the necessary code is loaded when required, reducing initial load times and optimizing performance.

If you're anything like our founder - Jono, you're the kind of person to live safely. You know the type: doesn't run with scissors, changes the smoke alarm batteries, all that responsible stuff.

Well, the good news is, that even though this is the de-facto pattern to build future apps, the old /page style directory will still work perfectly even in the latest version of Next.js. Let me reassure you that we have seen a lot of change in the frontend world over the many years we've been kicking about, and something we cannot understate, is how 

 Next.js/Vercel ensures every update is backwards compatible, meaning your site will last long into the future, even if you don't decide to optimise it and move to this new method of fetching data.

Integrating Sanity CMS for Seamless Content Management

Simplifying Content Creation and Management

Content management is a vital component of any web project. Sanity CMS, with its intuitive interface and flexible content modeling capabilities, makes content creation and management a breeze. Integrating Sanity CMS with Next.js and Tailwind CSS empowers developers with a streamlined workflow, enabling efficient collaboration between developers and content creators.

Real-Time Collaboration and Version Control

Sanity CMS provides real-time collaboration features, allowing multiple users to work on content simultaneously. With its powerful version control system, changes can be tracked, compared, and rolled back if needed, ensuring the integrity of the content and simplifying the content management process.

Click, Edit, Done: Introducing Visual Editing Powered by Sanity and Vercel

Introducing Visual Editing, the revolutionary feature powered by Sanity and Vercel! Say goodbye to complex editing workflows and hello to a seamless content management experience. With just a click, Visual Editing allows you to effortlessly update your content directly from your Vercel preview deployment, instantly navigating to the exact location within Sanity Studio. No more searching for content or making manual changes – it's as simple as clicking, editing, and done! Change once and see the impact everywhere across your web experience, without requiring any front-end code modifications. This game-changing collaboration between Sanity and Vercel is a dream come true for developers and content creators alike. Get ready to unleash your creativity, save time, and take control of your content like never before.

The Developer's Paradise: Crafting Web Experiences with Next 13.4, Tailwind CSS, and Sanity CMS

One of the standout advantages of using Tailwind CSS is its ability to facilitate rapid prototyping. With a vast collection of utility classes, developers can swiftly create and iterate on designs without writing custom CSS. This accelerates the development process and allows quick exploration of different design possibilities.

Say goodbye to cumbersome CSS files and tangled class names. Tailwind CSS offers a highly readable and intuitive approach to styling. With descriptive class names that convey their purpose, developers can easily understand and modify styles, resulting in cleaner and more maintainable codebases.

Enhanced Developer Experience with Next.js

Next.js provides an excellent development experience with features like hot module replacement, automatic code reloading, and comprehensive error reporting. This ensures a smooth and efficient development process, allowing developers to iterate quickly and catch errors early on.

What I wish I would have known about Tailwind earlier

It's these two lines, add them into your Visual Studio code, and you're in for a much nicer time when working with Tailwind. It wraps after 80 characters, no matter the screen size, making it significantly easier to read for any horizonta-phobes such as myself.

Conclusion: Empowering Web Developers with Next 13.4, Tailwind CSS, and Sanity CMS

In conclusion, the integration of Next 13.4, Tailwind CSS, and Sanity CMS opens up a world of possibilities for web developers. The seamless collaboration between these tools streamlines the development process, empowering developers to create fully optimized web apps and sites with ease. With Next 13.4's stable app routing, Tailwind CSS's utility-first approach, and Sanity CMS's intuitive content management capabilities, developers have a powerful toolkit at their disposal. So, what are you waiting for? Dive into this powerful combination and unlock the true potential of web development like never before!

A Seamless Experience with Next 13.4 Tailwind CSS and Sanity

Learn the best practices for cleaning Groq queries to improve data accuracy and speed up the query processing time. Discover tips for streamlining and optimizing your queries for maximum efficiency!

Any more questions?

Learning GROQ?

The open-source query language developed by Sanity. GROQ is a game-changer in data retrieval and manipulation, offering the ability to do things like: manipulate and mutate data before your frontend is even involved.

With GROQ, developers are empowered to describe precisely what information their applications require without any limitations. This opens up a whole new world of possibilities, enabling the creation of sophisticated and highly tailored responses to complex queries.

One of the critical strengths of GROQ is its ability to seamlessly join information from multiple sets of documents, making it an ideal solution for large and complex data structures. This means that developers can quickly stitch together a highly specific response with only the exact fields they need, resulting in a highly optimized and efficient solution.

One issue that is often discussed with GROQ is that its syntax can become unwieldy and difficult to manage as queries become more complex, especially when using long and repetitive fragments. This can reduce the code's readability and maintainability, making it difficult for developers to modify and update their queries efficiently. This issue emphasizes the importance of using best practices and effective coding techniques when using GROQ to keep queries manageable and easy to understand even as they become more complex.

This query, for example, is extremely difficult to comprehend. We can refactor this to make it more readable and clean.

GROQ is a query language, but it is just plain text in the javascript environment, which we can use to create a refactoring approach.

As we can see from the above query and list of queries, some blocks are abstractable, such as rich text, links, buttons, etc.

This entire rich text can be a separate GROQ fragment, such as

Alternatively, this variable can be a function that takes in the projection parameters and generates a GROQ fragment dynamically.

If you have a page builder (component list), you can have levels of fragments. This could also be a separate fragment, such as

Using this method, we can clean up our GROQ queries. From the above GROQ query, we can now refactor it as follows.

If you're just getting into GROQ make sure you download the Sanity.io VSCode extension...

 It's going to save you hours. It lets you do two things:

If you're struggling with the first and you're in a mono-repo environment, you can simply add your Sanity instance at the root of your Next/Remix/Gatsby environment.

What's really clever is it actually lets you pass in variables, like the 

You're going to get all the syntax highlighting goodness.

 solutions right this second to be able to prettify GROQ within JavaScript. That being said, these community options exist:

https://github.com/alevroub/prettier-plugin-groq

https://github.com/mcky/prettier-plugin-groq

However, if you're looking to quickly format your GROQ query before you clean it up with the techniques above there is something official you can use (and it's fantastic 🎉).

Okay, so now you've seen what you can to tidy up GROQ, but there's always the opportunity to improve your GROQ knowledge. That's why we recommend checking out the 

Don't say we don't ever give you anything...

Clean Your GROQ

Learn about the power of Sanity's Parameterized Templates, the ultimate solution for making content management simple and effective. Your content creation process will become dynamic with customizable initial values, saving you time and effort while ensuring that each piece of content meets your specific requirements. Sanity's Parameterized Templates can help you improve your content management strategy right away.

Sanity is a powerful platform for managing structured content, with various features that make complex data structures simple to create and manage. The ability to use parameterized templates, which allow you to define reusable templates that can be customized for each individual piece of content, is one of these features.

In Sanity, a parameterized template is a schema that contains variables that can be replaced with actual values when the template is used to generate new content. This enables you to create reusable templates specific to each piece of content, making it easier to manage and maintain your data over time.

This blog aims to provide a thorough overview of the concept of parameterized initial values within the Sanity platform. This concept enables the implementation of customizable templates, which editors can use during the instance creation process. The goal is to improve Sanity's content management's overall efficiency and flexibility.

Language-specific parameterized initial values can be considered when an editor needs content to be presented in a single language, such as French but does not need the base version. This method enables template customization to meet specific language requirements, increasing the overall efficiency and specificity of the content management process.

As shown in the image above, this code snippet demonstrates adding a new intent to an article.

Using templates in Sanity can significantly speed up the content creation process, especially when there are multiple child types present, such as "how-to" articles. Editors can benefit from increased efficiency and a more user-friendly experience by incorporating pre-defined parameterized initial values.

To achieve this use case, separate list items on sanity document structures can be used, as this will provide a clear and organized method for managing the relevant information.

now you can create templates to handle intents

With this implementation, the ability to create distinct sections within the desk structure has been added. The relevant parameterized initial values will be automatically populated upon creation.

Finally, the use of parameterized templates in Sanity enables a more efficient and dynamic approach to content management. Editors can streamline the creation process and ensure that each piece of content meets specific requirements by defining reusable templates with customizable initial values. This improves the Sanity platform's overall functionality and user-friendliness, making it a valuable tool for managing structured content.

Getting the hang of Sanity's Parameterized Templates

Discover how Sanity.io and OpenAI are revolutionizing visual content creation with AI-generated images. Learn how to integrate OpenAI's API into Sanity Studio for seamless image generation from text prompts. Boost your website's visual appeal and user experience with this cutting-edge technology.

Fancy generating AI cats?

OpenAI's DALL-E has recently been making headlines for its ability to generate images from textual prompts. In this article, we'll explore how developers can leverage this cutting-edge technology in conjunction with the powerful content management capabilities of 

 to revolutionize their visual content creation process.

 offers a highly versatile and collaborative platform for content creators to manage and develop various types of digital content.

, a state-of-the-art image generation tool, into sanity workflow, developers can unlock the potential for seamless incorporation of dynamic and unique image assets within their content, thus elevating the overall user experience.

This article will explore the technical aspects of integrating OpenAI's API to generate images from text prompts within the Sanity Studio. To achieve this, we will need the following:

Now for the sanity part, we need to create a schema with a field-type image

On Sanity Studio. you can simply select Open AI Image

this will open a dialog box like this. in here you can put the prompt text of the image. and click Generate

Clicking Confirm will upload this image as a sanity asset. if you are not happy with the image you can again click Generate

This Workflow will make content creators more productive as they can create new assets in the same window on the fly, which will result in an increase in the overall experience with sanity and content management.

https://www.loom.com/share/267fed477cf4458394eb2c2e4c964efc

Revolutionizing Visual Content Creation with Sanity.io and OpenAI

Looking to get dynamic open graph images working with your Sanity & Next.js website? We explain the steps to create truly dynamic images for your future blogs.

The aesthetic of a website on social networking can be enhanced by using Open Graph Images. it is possible to manage how a website is portrayed when it’s shared on social networking platforms by defining these images using a collection of meta tags on the head part of the page.

It is easy to notice the advantages of using Open Graph images when comparing a website with defined Open Graph images with one without. When shared on social media, the website with an Open Graph image will display an aesthetically pleasing and representational image, but the website without an Open Graph image will either display no image or a random image from the website's content. The user's opinion of the website and the likelihood to click on the shared link may be considerably impacted by this.

Setting up open graph image/social card generation on the next app

To create social cards there’s a plugin provided by vercel.

For Next.js implementations, make sure you are using Next.js v12.2.3 or newer

Create an API endpoint by adding og.tsx under /pages/api. Then paste the following code:

Then, based on the Open Graph Protocol (https://ogp.me/#metadata), create the web content for your social media post as follows:

Create a <meta> tag inside the <head> of the webpage

Add the property attribute with value og:image to the <meta> tag

Add the content attribute with value as the absolute path of the /api/og endpoint to the <meta> tag

To make the Open Graph image generation dynamic, developers can pass data into the API endpoint as query parameters and generate images based on that data. This can be done by creating a 

 endpoint, along with any desired query parameters.

this way you can customize the og image per page.

In this article, we have examined how to use Vercel and Next.js to generate and output Open Graph images for social media sharing. We have seen how to set up a Next.js app with Vercel and use the 

 plugin to generate Open Graph images. We have also explored advanced techniques for customising the Open Graph image functionality of a Next.js app with Vercel, such as generating dynamic images.

I hope this article has been helpful! If you have any questions or would like to learn more about using Vercel and Next.js for Open Graph images, be sure to check out the 

Thinking about generating an image for Sanity's blog?

Here's a quick tip, it says the image is 1200x700px - it's actually closer to 1200x758px if you want it to look identical to the Roboto Studio open graph.   

Dynamic open graph images with Sanity & Next.js

Senior full-stack developer at Roboto Studio. Full-time data stitcher & the sort of person that may (

) have generated his entire bio with AI...

Hrithik

A Seamless Experience with Next 13.4 Tailwind CSS and Sanity

Clean Your GROQ

Getting the hang of Sanity's Parameterized Templates

Revolutionizing Visual Content Creation with Sanity.io and OpenAI

Dynamic open graph images with Sanity & Next.js