mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Cody OlsenandGitHub
41019c2314
This PR updates the `cms-sanity` example to use: - App Router - TypeScript - Sanity Studio v3 instead of v2 - Embeds the Studio inside the next app on the `/studio` route. - ISR / Data Cache (revalidations through `revalidatePath` while in Live Visual Editing, time-based to match the Sanity API CDN in production). - Support Vercel Visual Editing out of the box. - The new `next-sanity/image` component. - Vercel Speed Insights. - The Sanity Presentation Tool for live content previews. - Sanity Portable Text setup to fully support `@tailwindcss/typography`. - [AI Assist](https://www.sanity.io/docs/ai-assist) - Auto fill in `alt` text on images. - Preset prompts for content creation
52 lines
2.3 KiB
TypeScript
52 lines
2.3 KiB
TypeScript
import type { ClientPerspective, QueryParams } from "next-sanity";
|
|
import { draftMode } from "next/headers";
|
|
|
|
import { client } from "@/sanity/lib/client";
|
|
import { token } from "@/sanity/lib/token";
|
|
|
|
/**
|
|
* Used to fetch data in Server Components, it has built in support for handling Draft Mode and perspectives.
|
|
* When using the "published" perspective then time-based revalidation is used, set to match the time-to-live on Sanity's API CDN (60 seconds)
|
|
* and will also fetch from the CDN.
|
|
* When using the "previewDrafts" perspective then the data is fetched from the live API and isn't cached, it will also fetch draft content that isn't published yet.
|
|
*/
|
|
export async function sanityFetch<QueryResponse>({
|
|
query,
|
|
params = {},
|
|
perspective = draftMode().isEnabled ? "previewDrafts" : "published",
|
|
/**
|
|
* Stega embedded Content Source Maps are used by Visual Editing by both the Sanity Presentation Tool and Vercel Visual Editing.
|
|
* The Sanity Presentation Tool will enable Draft Mode when loading up the live preview, and we use it as a signal for when to embed source maps.
|
|
* When outside of the Sanity Studio we also support the Vercel Toolbar Visual Editing feature, which is only enabled in production when it's a Vercel Preview Deployment.
|
|
*/
|
|
stega = perspective === "previewDrafts" ||
|
|
process.env.VERCEL_ENV === "preview",
|
|
}: {
|
|
query: string;
|
|
params?: QueryParams;
|
|
perspective?: Omit<ClientPerspective, "raw">;
|
|
stega?: boolean;
|
|
}) {
|
|
if (perspective === "previewDrafts") {
|
|
return client.fetch<QueryResponse>(query, params, {
|
|
stega,
|
|
perspective: "previewDrafts",
|
|
// The token is required to fetch draft content
|
|
token,
|
|
// The `previewDrafts` perspective isn't available on the API CDN
|
|
useCdn: false,
|
|
// And we can't cache the responses as it would slow down the live preview experience
|
|
next: { revalidate: 0 },
|
|
});
|
|
}
|
|
return client.fetch<QueryResponse>(query, params, {
|
|
stega,
|
|
perspective: "published",
|
|
// The `published` perspective is available on the API CDN
|
|
useCdn: true,
|
|
// Only enable Stega in production if it's a Vercel Preview Deployment, as the Vercel Toolbar supports Visual Editing
|
|
// When using the `published` perspective we use time-based revalidation to match the time-to-live on Sanity's API CDN (60 seconds)
|
|
next: { revalidate: 60 },
|
|
});
|
|
}
|