Work-ready Next.js
Build a functional, content-driven and dynamic web application that best serves your end-users, fellow developers and content authors.
Content is the lifeblood of applications. Ensure fresh content is served to all users—even at massive scale—without specialized infrastructure or dedicated engineering teams using the Live Content API.
Live Content API powers subscriptions of fine-grained changes to the response of any query, when mutations of any kind happen in any relevant document.
This code example shows the minimum required setup in Next.js using the next-sanity package.
The documentation contains more details for installation in other frameworks.
import { client } from "@/sanity/client"; import { defineLive } from "next-sanity"; const { sanityFetch, SanityLive } = defineLive({ client }); export default async function Page() { const {data: products} = await sanityFetch({ query: PRODUCTS_QUERY }); return ( <section> {products.map((product) => ( <article key={product._id}> <a href={`/product/${product.slug}`}>{product.title}</a> </article> ))} <SanityLive /> </section> ); }
The days of pressing refresh to get the latest products, promotions, news stories, or anything else are over.
Live content is pushed, not pulled. The content of your application should change when content at the source changes. The Live Content API makes it so.
The Live Content API sends events when fine-grained changes occur, so that the CDN is only partly invalidated. This change is propagated throughout the CDN as well as to individual end-users.
Even under high-traffic scenarios with fast-moving such as Black Friday sales or limited edition releases – your application's data will be as fresh as the source from which it is consumed.
Get started with a free Sanity project or contact our sales team for a personalized demo.
import { client } from "@/sanity/client";
import { defineLive } from "next-sanity";
const { sanityFetch, SanityLive } = defineLive({ client });
export default async function Page() {
const {data: products} = await sanityFetch({ query: PRODUCTS_QUERY });
return (
<section>
{products.map((product) => (
<article key={product._id}>
<a href={`/product/${product.slug}`}>{product.title}</a>
</article>
))}
<SanityLive />
</section>
);
}