Ontwerp een op maat gemaakte Sanity CMS content preview ervaring
description
Met deze prompt ontwerp je een op maat gemaakte content preview die precies aansluit bij jouw projectwensen. Het helpt je de inhoud tijdens het bewerken beter te visualiseren en fouten vroegtijdig te signaleren. Dit verbetert de efficiëntie van content creatie en zorgt voor een professionele presentatie zonder duplicatie van gangbare contentmodel- of migratiethema's.
prompt
Help me een op maat gemaakte content preview ervaring te ontwerpen voor mijn Sanity CMS project. Mijn wensen voor de preview functionaliteit zijn: <beschrijf de gewenste preview functies, zoals live updates, aangepaste rendering, of device simul ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een overzicht van hoe je een op maat gemaakte content preview ervaring kunt ontwerpen voor je Sanity CMS project, inclusief live updates en custom React rendering:
1. Setup van Sanity Preview API
- Maak een preview API token en configureer je Sanity studio zodat deze preview-URL's kan genereren.
- Implementeer een preview URL in je Sanity schema die je doorverwijst naar je Next.js of React app met een preview mode parameter.
2. Preview Mode in je React app
- Implementeer een preview context of state die aangeeft of je in preview mode bent.
- Gebruik de Sanity client met preview API om live content te halen:
```javascript
import { createClient } from 'next-sanity';
const sanityClient = createClient({
projectId: 'jouw-project-id',
dataset: 'production',
useCdn: false, // Disable CDN voor preview
token: 'jouw-preview-token',
});
export const fetchPreviewData = async (query, params) => {
return await sanityClient.fetch(query, params);
};
```
3. Live updates implementeren
- Gebruik Sanity's webhook of real-time listener (bijvoorbeeld via `@sanity/client` met `listen()` method) om live updates te ontvangen.
- In je React component, bijvoorbeeld voor een blogpost:
```javascript
import { usePreviewSubscription } from 'next-sanity';
const BlogPostPreview = ({ slug }) => {
const query = `*[_type == "blogPost" && slug.current == $slug][0]`;
const { data: post } = usePreviewSubscription(query, {
params: { slug },
enabled: true,
});
return (
<div>
{post ? (
<CustomBlogPostRenderer post={post} />
) : (
<p>Loading...</p>
)}
</div>
);
};
```
4. Custom rendering met React component
- Maak React componenten die je content types op maat renderen:
```javascript
const CustomBlogPostRenderer = ({ post }) => (
<article>
<h1>{post.title}</h1>
<div>{/* Render rich text met @sanity/block-content-to-react */}</div>
</article>
);
const ProductPageRenderer = ({ product }) => (
<div>
<img src={product.image.asset.url} alt={product.name} />
<h2>{product.name}</h2>
<p>Prijs: €{product.price}</p>
</div>
);
```
- Gebruik `@sanity/block-content-to-react` voor rich text:
```javascript
import BlockContent from '@sanity/block-content-to-react';
const RichTextRenderer = ({ blocks }) => (
<BlockContent blocks={blocks} />
);
```
5. Integratie in je app
- Detecteer preview mode via URL query parameter of context.
- Pas je fetch- en rendering logica aan zodat je in preview mode live updates en custom rendering krijgt.
6. Extra tips
- Gebruik Sanity's `listen()` API voor nog meer real-time updates binnen je React app.
- Zorg dat je preview functionaliteit makkelijk in en uit te schakelen is, bijvoorbeeld via een toggle in je UI.
Met deze aanpak heb je een flexibele, live preview ervaring met maatwerk React componenten voor je Sanity content types.
provider: deepseek
model: deepseek-chat
Beste collega-ontwikkelaar,
Ik help je graag een op maat gemaakte preview-ervaring te bouwen voor je Sanity CMS. Hier is een complete Nederlandse handleiding:
## 1. Sanity Studio Configuratie
Eerst installeer je de benodigde dependencies:
```bash
npm install @sanity/vision @sanity/preview-kit
```
## 2. Preview Configuratie in deskStructure.js
```javascript
// deskStructure.js
import S from '@sanity/desk-tool/structure-builder'
import { EyeOpenIcon } from '@sanity/icons'
export const getDefaultDocumentNode = ({ schemaType }) => {
if (['blogPost', 'productPage'].includes(schemaType)) {
return S.document().views([
S.view.form(),
S.view
.component(PreviewPane)
.options({ previewUrl: resolvePreviewUrl })
.icon(EyeOpenIcon)
.title('Preview')
])
}
return S.document().views([S.view.form()])
}
```
## 3. Preview URL Resolver
```javascript
// previewResolver.js
export const resolvePreviewUrl = (document) => {
const baseUrl = process.env.SANITY_STUDIO_PREVIEW_URL || 'http://localhost:3000'
if (document._type === 'blogPost') {
return `${baseUrl}/blog/preview/${document._id}`
}
if (document._type === 'productPage') {
return `${baseUrl}/products/preview/${document._id}`
}
return baseUrl
}
```
## 4. Custom Preview Component
```javascript
// PreviewPane.jsx
import React from 'react'
import { Preview } from '@sanity/preview-kit'
import { useDocumentOperation } from '@sanity/react-hooks'
const PreviewPane = ({ document, options }) => {
const { patch } = useDocumentOperation(document._id, document._type)
const [isLoading, setIsLoading] = React.useState(true)
const handlePreviewUpdate = (updatedDocument) => {
// Live updates handler
patch.execute([{ set: updatedDocument }])
}
return (
<div style={{ height: '100%', position: 'relative' }}>
{isLoading && <div>Loading preview...</div>}
<iframe
style={{ width: '100%', height: '100%', border: 'none' }}
src={options.previewUrl(document)}
onLoad={() => setIsLoading(false)}
/>
</div>
)
}
```
## 5. Frontend Preview Setup (Next.js voorbeeld)
```javascript
// pages/blog/preview/[id].js
import { useRouter } from 'next/router'
import { PreviewSuspense } from '@sanity/preview-kit'
import BlogPost from '../../components/BlogPost'
import { getClient } from '../../lib/sanity'
export default function PreviewBlogPostPage() {
const { query } = useRouter()
return (
<PreviewSuspense fallback="Loading...">
<PreviewBlogPost id={query.id} />
</PreviewSuspense>
)
}
function PreviewBlogPost({ id }) {
const data = usePreview(null, `
*[_type == "blogPost" && _id == $id][0]{
...,
body[]{
...,
_type == "image" => {
...,
asset->
}
}
}
`, { id })
return <BlogPost post={data} isPreview />
}
```
## 6. Custom Rendering Components
```javascript
// components/RichTextRenderer.jsx
import React from 'react'
import { PortableText } from '@portabletext/react'
import Image from 'next/image'
const CustomRichText = ({ value }) => {
const components = {
types: {
image: ({ value }) => (
<div className="custom-image">
<Image
src={value.asset.url}
alt={value.alt || ''}
width={800}
height={600}
/>
</div>
)
},
marks: {
highlight: ({ children }) => (
<span style={{ backgroundColor: '#ffeb3b' }}>{children}</span>
)
}
}
return <PortableText value={value} components={components} />
}
```
## 7. Environment Variabelen
Voeg toe aan `.env.local`:
```env
SANITY_STUDIO_PREVIEW_URL=http://localhost:3000
SANITY_STUDIO_API_DATASET=production
```
## 8. Live Updates Configuratie
```javascript
// lib/sanity.js
import { createClient } from '@sanity/client'
import { definePreview } from '@sanity/preview-kit'
export const client = createClient({
projectId: 'your-project-id',
dataset: 'production',
useCdn: false,
apiVersion: '2023-05-03',
token: process.env.SANITY_API_TOKEN
})
export const usePreview = definePreview({
projectId: 'your-project-id',
dataset: 'production'
})
```
## Belangrijke Tips:
1. **Security**: Implementeer propere authentication voor preview routes
2. **Performance**: Gebruik `React.memo` voor custom components
3. **Error Handling**: Voeg error boundaries toe rond preview components
4. **TypeScript**: Overweeg types voor betere developer experience
Deze setup geeft je:
- ✅ Live updates tijdens het editen
- ✅ Custom React components voor rendering
- ✅ Specifieke previews per content type
- ✅ Goede performance met Suspense
Succes met je project! Laat het weten als je meer specifieke details nodig hebt.